如何在屏幕调整大小事件中修改 Jquery 自动滚动参数

Question

我正在使用jCarouselLite来显示精选列表幻灯片。我想在屏幕调整大小事件期间更改"可见：no_of_slides"参数。我写了下面的代码，但是当调整浏览器大小时，自动滚动不再正常运行，它会左右移动并快速跳跃。

也就是说，下面的代码不正确，如果有人改进它或建议更好的方法，我将非常高兴。

<script>
        window.addEventListener("resize", displayViewportSize, false);
        displayViewportSize(null);
        function displayViewportSize(e) {
            var nslides;
            if (920 < document.body.clientWidth){
                nslides = 5;
            } else if (850 < document.body.clientWidth) {
                nslides = 4;
            } else if (700 < document.body.clientWidth) {
                nslides = 3;
            } else if (550 < document.body.clientWidth) {
                nslides = 2;
            } else {
                nslides = 1;
            }
            /* featured listings slider */
    jQuery(document).ready(function($) {
        $('div.slider').jCarouselLite({
            btnNext: '.next',
            btnPrev: '.prev',
            autoWidth: true,
            responsive: true,
            pause: true,
            auto: true,
            timeout: 2800,
            speed: 800,
                            visible: nslides,
            init: function() {
                $('div.slider').fadeIn();
            },
            easing: 'easeOutQuint' // for different types of easing, see easing.js
        });
    });
        }
</script>

Answer 1

您需要使用媒体查询和响应方式来执行您尝试的操作。

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');
        jcarousel
            .on('jcarousel:reload jcarousel:create', function () {
                var carousel = $(this),
                    width = carousel.innerWidth();
                if (width >= 600) {
                    width = width / 3;
                } else if (width >= 350) {
                    width = width / 2;
                }
                carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
            })
            .jcarousel({
                wrap: 'circular'
            });
        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });
        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });
        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .on('click', function(e) {
                e.preventDefault();
            })
            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
                }
            });
           $('.jcarousel').jcarouselAutoscroll({
              interval: 3000,
              autostart: true
           });
    });
})(jQuery);

/** page **/
body {
    background: #ccc;
    margin: 0;
    padding: 0;
    font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4E443C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
  font-weight: normal;
  text-rendering: optimizelegibility;
}
h1 {
    color: #4E443C;
    font-size: 36px;
    font-weight: bold;
}
h2, h2 a {
    color: #F14E32;
}
h3, h3 a {
  color: #0388A6;
}
a {
  color: #0388A6;
}
pre {
  border:1px solid #000;
  overflow-x:auto;
  background: #222;
  color: #fff;
  text-shadow: none;
}
.wrapper {
    max-width: 620px;
    padding: 0 20px 40px 20px;
    margin: auto;
}
/** jcarousel **/
.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}
/** Carousel **/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
    left: 15px;
}
.jcarousel-control-next {
    right: 15px;
}
/** Carousel Pagination **/
.jcarousel-pagination {
    position: absolute;
    bottom: -40px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;
    background: #fff;
    color: #4E443C;
    border-radius: 10px;
    text-indent: -9999px;
    margin-right: 7px;
    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.min.js"></script>
<div class="wrapper">
            <h1>Responsive Carousel</h1>
            
            <p>Tresponsive carousel. Resize the browser window to see the effect.</p>
            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="http://lorempixel.com/400/200?1" alt="Image 1"></li>
                        <li><img src="http://lorempixel.com/400/200?2" alt="Image 2"></li>
                        <li><img src="http://lorempixel.com/400/200?3" alt="Image 3"></li>
                        <li><img src="http://lorempixel.com/400/200?4" alt="Image 4"></li>
                        <li><img src="http://lorempixel.com/400/200?5" alt="Image 5"></li>
                        <li><img src="http://lorempixel.com/400/200?6" alt="Image 6"></li>
                    </ul>
                </div>
                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
                <p class="jcarousel-pagination"></p>
            </div>
        </div>