如何在屏幕调整大小事件期间修改 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>