jquery 移动幻灯片时会触发狡猾的滑块图像

我用的是普通的希尔滑球该项目具有图片和说明。
乍一看，一切都像它应该的那样工作，但有一个问题
如果你仔细观察图像本身，当滑块开始滚动时，图像开始表现得有点不正常，它开始左右抽动一点，只有当滑块完成滚动时才恢复正常
是什么导致了这种情况，如何解决？？
要想看清楚这一点，请尽量不要滚动幻灯片，而是按住鼠标左键，在不滚动幻灯片的情况下向左转，然后松开。图像将开始不正确的行为
添加了一个黑暗的背景，并稍微放大了幻灯片，现在你可以看到的问题好一点。你需要准确地看图片的边缘，就好像那里出现了某种边框

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>

试试下面的css，它有点过杀，可以改进，但缝工作

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;
}

字符串

jquery 移动幻灯片时会触发狡猾的滑块图像

2条答案

相关问题

热门标签

最新问答