如何在單擊按鈕上顯示Bx滑塊

我想單擊按鈕時顯示bx-slider。我需要用三個按鈕連續顯示三個滑塊。當有人點擊任何按鈕時，一個滑塊激活，其他隱藏。但是當我點擊按鈕時，它不顯示圖像，只有滑塊打開並且箭頭可見。這裏是我的代碼如何在單擊按鈕上顯示Bx滑塊

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Document</title> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css"> 
     <style> 
      .slider{ 
       display:none; 
      } 
     </style> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('.bxslider').bxSlider(); 

       $('.open').click(function(){ 
       $('.slider').show(); 
       $('.bxslider').bxSlider(); 
       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <a href="javascript:;" class="open">Open Slider</a> 
     <div class="slider"> 
      <ul class="bxslider"> 
       <li><img src="http://landscapelook.com/wp-content/uploads/2015/10/beauty_of_nature_images_gallery.jpg" /></li> 
       <li><img src="http://stuffpoint.com/nature/image/277236-nature-nature-beauty-scenery-bridge.jpg" /></li> 
       <li><img src="http://www.images-gededah.in/wp-content/uploads/Beauty-of-Nature20.jpg" /></li> 
      </ul> 
     </div> 
    </body> 
</html>

鏈接爲的jsfiddle https://jsfiddle.net/h8teec45/

來源

2016-01-18 Sunil Chatterji

您應該刪除，你隱藏的滑塊和使用這種與jQuery隱藏滑塊的CSS線（見$('.slider').hide();）：

$(document).ready(function(){ 
 
    $('.bxslider').bxSlider(); 
 
    $('.slider').hide(); 
 
    $('.open').click(function(){ 
 
    \t $('.slider').show(); 
 
    $('.bxslider').bxSlider(); 
 
    }); 
 
    
 
});

它應該工作得很好。

Fiddle。

來源

2016-01-18 10:48:14 Ionut

相當玩！ '：）' –

如何在單擊按鈕上顯示Bx滑塊

回答

相關問題