Question

我有两个旋转木马显示在我的网站的同一位置，用我的图像链接切换2，旋转木马是使用光滑的滑块创建的。但是当我点击“即将推出”的第二个按钮时，我只能看到下一个和上一个图标，只有点击下一个图标我才会看到第二个滑块可见。这是链接 - http://www.clearedge.com.sg/staging/samplesite/slider.html

我的HTML代码：

<div class="container">
  <div class="row">
    <div class="text-justify col-lg-12">
      <div class="nowshowing">
        <div>
          <div class="nowshowing-title">
            <div id="nav">
              <a href="#content1"><img id="#nowshowing" src="images/nowshowing.jpg"></a>
              <a href="#content2"><img src="images/comingsoon.jpg"></a>
            </div>
          </div>
        </div>
        <div class="slider-background">
          <div id="content1" class="toggle">
            <section id="nav2" class="responsive slider">
              <div>
                <a href="#ns_movie1"><img src="images/movie1.jpg"></a>
              </div>
              <div>
                <a href="#ns_movie2"><img src="images/movie2.jpg"></a>
              </div>
              <div>
                <a href="#ns_movie3"><img src="images/movie3.jpg"></a>
              </div>
              <div>
                <a href="#ns_movie4"><img src="images/movie4.jpg"></a>
              </div>
              <div>
                <a href="#ns_movie5"><img src="images/movie5.jpg"></a>
              </div>
              <div>
                <a href="#ns_movie6"><img src="images/movie1.jpg"></a>
              </div>
            </section>
          </div>
          <div id="content2" class="toggle" style="display:none;">
            <section id="nav2" class="responsive2 slider">
              <div>
                <img src="images/movie2.jpg">
              </div>
              <div>
                <img src="images/movie2.jpg">
              </div>
              <div>
                <img src="images/movie2.jpg">
              </div>
              <div>
                <img src="images/movie2.jpg">
              </div>
              <div>
                <img src="images/movie2.jpg">
              </div>
              <div>
                <img src="images/movie2.jpg">
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的jQuery：

$("#nav a").click(function(e) {
  e.preventDefault();
  $(".toggle").hide();
  var toShow = $(this).attr('href');
  $(toShow).show();
});

$('.responsive').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 5,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }, {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});


$('.responsive2').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 5,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }, {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

非常感谢任何帮助。

AJAY

Answer 1

$('.slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });


$("#link2").click(function(e) {

  $('.slider2').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });

});

当我用2个图像按钮切换时，我的光滑滑块不工作

1 个答案: