頁面上的多個滑塊tih切換按鈕

我有選項卡按鈕與coressponding年，當頁面加載活動類肩膀在巴頓，並顯示我coresponsind滑塊。我使用bxslider。所有工作正常與切換按鈕和隱藏和顯示新的div，但我不能在頁面上實現多個bxslider。 codepen 頁面上的多個滑塊tih切換按鈕

#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(); 
    });

來源

2017-03-03 Palaniichuk Dmytro

你正在做正確了兩兩件事：

您沒有使用CDN的bxslider.js。您可以使用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

來源

2017-03-03 19:00:37

謝謝，如何使只有一個活躍的，而不是三個一眼， /* .awards滑塊：沒有（＃滑蓋2016）{ 顯示：無; } * /不工作 –

我不確定你在問什麼。你能改說嗎？ –

當頁面加載時，我一次看到所有三個滑塊，如何只加載活動的一個滑塊。 –

頁面上的多個滑塊tih切換按鈕

回答

相關問題