Question 214309 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – sly slider images are triggered when moving slides

I’m using a regular Sly slider. The item has a picture and a description.

At first glance, everything works as it should, but there is one problem

If you look closely at the image itself, when the slider starts to scroll, the image starts to behave a little incorrectly, it starts to twitch around a bit, and gets back to normal only when the slider finishes scrolling

What could be causing this, and how can it be fixed??

To see this well, try not to scroll the slide, but hold down the left mouse button, turn to the left without scrolling the slide and release. The image will start to behave incorrectly

Added a dark background, and slightly enlarged the slides, now you can see the problem a little better. You need to look exactly at the edges of the picture, as if some kind of borders appear there

let commonSly = {
    onChange: function (eventName, sly) {
        let duration = eventName !== 'load' ? 400 : 0,
            $prevElms = $(sly.options.prevPage).add(sly.options.prev),
            $nextElms = $(sly.options.nextPage).add(sly.options.next);

        if (sly.pos.dest <= sly.pos.start) {
            $prevElms.fadeOut(duration);
        } else {
            $prevElms.fadeIn(duration);
        }

        if (sly.pos.dest >= sly.pos.end) {
            $nextElms.fadeOut(duration);
        } else {
            $nextElms.fadeIn(duration);
        }
    }
};

let slider = {
    frame: null,
    wrap: null,
    sly: null,
    init: function () {
        let _self = this;
        _self.frame = $('#slider .frame');
        _self.wrap = _self.frame.parent();

        _self.initSly();
        $(window).resize(function () {
            _self.resize();
        })
        _self.resize();
    },
    resize: function () {
        let _self = this;
        _self.sly.reload();
    },
    initSly: function () {
        let _self = this;
        _self.sly = new Sly(_self.frame, {
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            speed: 2000,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Cycling
            cycleBy: 'items',
            cycleInterval: 2000,
            pauseOnHover: 1,
        }).init();
    },
}

slider.init();
body {background:#313844}

.frame.horizontal {
    overflow: hidden;
  padding: 30px;
}
 .frame.horizontal ul {
    list-style:none;
    margin:0 0 10px;
    padding:0;
    height:100%;
    display:flex;
    flex-direction:row;
    overflow:hidden;
    position:relative;
}
 .frame.horizontal ul li {
    width:480px;
    display:block;
    margin:0 0 0 20px;
    padding:0 0 15px;
    list-style:none;
    text-align:left;
    background:white;
    border-radius:10px;
    position:relative;
}
 .frame.horizontal ul li:before {
    display:none;
}
 .frame.horizontal ul li:first-child {
    margin:0;
}
 .slider .frame.horizontal ul li {
    width:700px;
    background:white;
    color:purple;
}
 .slider .frame.horizontal ul li img {
    width:700px;
    border-radius:10px 10px 0 0;
}
 .slider .frame.horizontal ul li .title {
    padding:10px;
    font-size:18px;
}
 .slider .frame.horizontal ul li .description {
    padding:10px;
    font-size:14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="slider" id="slider">
    <div class="week-wrap">
        <div class="frame horizontal">
            <ul class="clearfix">
                <li class="it">
          <img src="https://i.imgur.com/iw0ePEB.jpg">
                    <div class="about">
                        <div class="title">Lorem Ipsum</div>
                        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    </div>
                </li>
        <li class="it">
          <img src="https://i.imgur.com/2Jd50CJ.jpg">
                    <div class="about">
                        <div class="title">Why do we use it?</div>
                        <div class="description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
                    </div>
                </li>
        <li class="it">
          <img src="https://i.imgur.com/27i1TSY.jpg">
                    <div class="about">
                        <div class="title">Where can I get some?</div>
                        <div class="description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
                    </div>
                </li>
        <li class="it">
          <img src="https://i.imgur.com/iw0ePEB.jpg">
                    <div class="about">
                        <div class="title">Lorem Ipsum</div>
                        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    </div>
                </li>
        <li class="it">
          <img src="https://i.imgur.com/2Jd50CJ.jpg">
                    <div class="about">
                        <div class="title">Why do we use it?</div>
                        <div class="description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
                    </div>
                </li>
        <li class="it">
          <img src="https://i.imgur.com/27i1TSY.jpg">
                    <div class="about">
                        <div class="title">Where can I get some?</div>
                        <div class="description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.2.3/sly.min.js" integrity="sha512-ao6nZ/r3l684RKdI0PxtTYwggjMa0IrnO9A+Ay/Eu64CtdZnqKQJGfqap5wtR9xI9uTWcK637llWj0+PkGRBog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js" integrity="sha512-xq+0+dRhI6SZOh+lDnMJEju2p2YPINflJLcYrRAsIMaXnJi6/V3lppCMCYsB2MLeF2E93r+fVo0MioY90pNzpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Tags:

2

Answers


  1. 0

    eample

    I just don’t see it, this is me doing what you said to do, perhaps my eyesight isn’t what it used to be, have you checked this isn’t an issue with just your browser/pc ?

    Login or Signup to reply.
  2. 0

    try the following css, its a tad over kill and could be improved but seamed to work

    
body {
  background: #313844
}

.frame.horizontal {
  overflow: hidden;
  padding: 30px;
  border: 0;
  background: none;
}

.frame.horizontal ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  background: none;
}

.frame.horizontal ul li {
  width: 480px;
  display: block;
  margin: 0 0 0 20px;
  padding: 0 0 15px;
  list-style: none;
  text-align: left;
  background: none;
  border-radius: 10px;
  border: 0px;
  position: relative;
  background: none;
}

.frame.horizontal ul li:before {
  display: none;
  border: 0;
  background: none;
}

.frame.horizontal ul li:first-child {
  margin: 0;
  border: 0;
  background: none;
}

.slider .frame.horizontal ul li {
  width: 700px;
  background: white;
  color: purple;
  border: 0;
  background: none;
}

.slider .frame.horizontal ul li img {
  width: 700px;
  border-radius: 10px 10px 0 0;
  border: 0;
  background: none;
}

.slider .frame.horizontal ul li .title {
  padding: 10px;
  font-size: 18px;
  border: 0;
  background: none;
}

.slider .frame.horizontal ul li .description {
  padding: 10px;
  font-size: 14px;
  border: 0;
  background: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search