Question

我有一个带有压制年份的标签按钮，当页面加载活动类应该在batton上，并显示我的coresponsind滑块。我用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

你做错了两件事：

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

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

页面上的多个滑块tih切换按钮

1 个答案: