javascript - 页面上的多个 slider 和切换按钮

Question

我有对应年份的选项卡按钮，当页面加载时，事件类应该在按钮上，并显示对应的 slider 。我使用 bxslider。使用切换按钮以及隐藏和显示新的 div 都可以正常工作，但我无法在页面上实现多个 bxslider。 codepen

#awards-bar
  .awards-bar-steps
    .step.step-1.active(data-slider='2016')
      span  2016
    .step.step-2(data-slider='2015')
      span  2015
    .step.step-3(data-slider='2014')
      span  2014

.awards-slider#slider-2016(data-slider='2016')
  p 2016
  ul#slider1
      li
        img(src='http://bxslider.com/images/730_200/houses.jpg')
      li
        img(src='http://bxslider.com/images/730_200/hill_fence.jpg')
.awards-slider#slider-2015(data-slider='2015')
  p 2015
  ul#slider2
      li
        img(src='http://bxslider.com/images/730_200/tree_root.jpg')
      li
        img(src='http://bxslider.com/images/730_200/houses.jpg')
      li
        img(src='http://bxslider.com/images/730_200/hill_fence.jpg')
.awards-slider#slider-2014(data-slider='2014')
  p 2014
  ul#slider3
      li
        img(src='http://bxslider.com/images/730_200/tree_root.jpg')
      li
        img(src='http://bxslider.com/images/730_200/houses.jpg')
      li
        img(src='http://bxslider.com/images/730_200/hill_fence.jpg')



$('#slider1').bxSlider({
        slideWidth: 322,
        minSlides: 1,
        slideMargin: 10,
        maxSlides: 3,
        // maxSlides: (widthAwardsSlide < 640) ? 1 : 3,
        moveSlides: 1,
        infiniteLoop: false,
        auto: false,
        autoReload: true,
        controls: false
    });
$('#slider2').bxSlider({
        slideWidth: 322,
        minSlides: 1,
        slideMargin: 10,
         maxSlides: 3,
        // maxSlides: (widthAwardsSlide < 640) ? 1 : 3,
        moveSlides: 1,
        infiniteLoop: false,
        auto: false,
        autoReload: true,
        controls: false
    });
$('#slider3').bxSlider({
        slideWidth: 322,
        minSlides: 1,
        slideMargin: 10,
        maxSlides: 3,
        // maxSlides: (widthAwardsSlide < 640) ? 1 : 3,
        moveSlides: 1,
        infiniteLoop: false,
        auto: false,
        autoReload: true,
        controls: false
    });

$('.step').click(
    function() {
        $('.awards-slider').hide();
        $('.awards-slider').eq($(this).index()).show();
    });

Answer 1

你做错了两件事:

1. 您没有为 bxslider.js 使用 CDN。您可以使用 https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.9/jquery.bxslider.js
2. 您没有使用 bxslider.css。您可以使用 https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.9/jquery.bxslider.min.css

这是我的演示:http://codepen.io/obliviga/pen/NpNQeK?editors=1010