Question

请告诉我如何制作几个滑块的滑动计数器，它们不应该一起工作

在我的例子中他们一起工作 https://codepen.io/anon/pen/oqqYjB?editors=1010

<div class="container">
  <div class="slider">
    <div class="slider__container">
      <div class="slider__slide">
        <img src="https://inlolcats.com/lolz/photos-public-domain-com/funny-cat-peering-into-open-desktop-computer-case-600x400.jpg" alt="">
      </div>

      <div class="slider__slide">
        <img src="https://inlolcats.com/lolz/photos-public-domain-com/black_and_white_cat_by_flower_pot-600x450.jpg" alt="">
      </div>

      <div class="slider__slide">
        <img src="https://inlolcats.com/lolz/photos-public-domain-com/orange-and-white-cat-600x457.jpg" alt="">
      </div>
    </div>
</div>    
    <div class="sliderGallery__control">
      <div class="sliderGallery__counter">
        <span class="sliderGallery__current"></span> /
        <span class="sliderGallery__total"></span>
      </div>
    </div>
</div>

Answer 1

我可以观察到代码中存在一些语法问题。我为你创建了一个样本here HTML语法格式应为

<div class="carousel_class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

要初始化轮播，请使用以下代码

$(document).ready(function(){
  $('.carousel_class').slick({
  slidesToShow: 3,
  dots:true,
  centerMode: true,
  });
});

我希望这可以帮助你开始。

- 帮助：）

Answer 2

使用滑块的唯一名称。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">

    <title>Sliders</title>
    <style>
        /* .container {} */

        .slider {
            margin: 0 auto;
            width: 600px;
            height: 400px;
        }
    </style>
</head>



<body>
    <div class="container">
        <div class="slider">
            <div class="slider__container">
                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/funny-cat-peering-into-open-desktop-computer-case-600x400.jpg"
                        alt="">
                </div>

                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/black_and_white_cat_by_flower_pot-600x450.jpg" alt="">
                </div>

                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/orange-and-white-cat-600x457.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="sliderGallery__control">
            <div class="sliderGallery__counter">
                <span class="sliderGallery__current"></span> /
                <span class="sliderGallery__total"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="slider">
            <div class="slider__container2">
                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/funny-cat-peering-into-open-desktop-computer-case-600x400.jpg"
                        alt="">
                </div>

                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/black_and_white_cat_by_flower_pot-600x450.jpg" alt="">
                </div>

                <div class="slider__slide">
                    <img src="http://inlolcats.com/lolz/photos-public-domain-com/orange-and-white-cat-600x457.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="sliderGallery__control">
            <div class="sliderGallery__counter">
                <span class="sliderGallery__current"></span> /
                <span class="sliderGallery__total"></span>
            </div>
        </div>
    </div>
    <script>

        var $slider = jQuery('.slider__container');

        $slider.each(function () {

            jQuery(this).on('init reInit afterChange', function (event, slick) {
                slideCount = slick.slideCount;
                setSlideCount();
                setCurrentSlideNumber(slick.currentSlide);
            });

            jQuery(this).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                setCurrentSlideNumber(nextSlide);
            });

            function setSlideCount() {
                let $total = jQuery('.sliderGallery__counter').find('.sliderGallery__total');
                $total.text(slideCount);
            }

            function setCurrentSlideNumber(currentSlide) {
                let $current = jQuery('.sliderGallery__counter').find('.sliderGallery__current');
                $current.text(currentSlide + 1);
            }

            jQuery(this).slick({
                useTransform: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                rows: 0,
                infinite: true,
                focusOnSelect: false,
                adaptiveHeight: true,
                centerMode: false,
                arrows: true,
                variableWidth: true,
                pauseOnFocus: false,
                pauseOnHover: false
            });
        });


        var $slider2 = jQuery('.slider__container2');

        $slider2.each(function () {

            jQuery(this).on('init reInit afterChange', function (event, slick) {
                slideCount = slick.slideCount;
                setSlideCount();
                setCurrentSlideNumber(slick.currentSlide);
            });

            jQuery(this).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                setCurrentSlideNumber(nextSlide);
            });

            function setSlideCount() {
                let $total = jQuery('.sliderGallery__counter').find('.sliderGallery__total');
                $total.text(slideCount);
            }

            function setCurrentSlideNumber(currentSlide) {
                let $current = jQuery('.sliderGallery__counter').find('.sliderGallery__current');
                $current.text(currentSlide + 1);
            }

            jQuery(this).slick({
                useTransform: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                rows: 0,
                infinite: true,
                focusOnSelect: false,
                adaptiveHeight: true,
                centerMode: false,
                arrows: true,
                variableWidth: true,
                pauseOnFocus: false,
                pauseOnHover: false
            });
        });</script>
</body>

</html>

光滑的旋转木马计数指示器为几个滑块

2 个答案: