Question

我想在点击按钮时显示bx-slider。我需要用三个按钮连续显示三个滑块。当有人点击任何按钮时，一个滑块激活，其他滑块被隐藏。但是，当我以前单击按钮时，它不显示图像，只有滑块打开，箭头可见。这是我的代码

<!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/

的链接

Answer 1

您应该删除隐藏滑块的CSS行，并使用jQuery隐藏滑块（参见$('.slider').hide();）：

＆＃13;

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

＆＃13;

它应该可以正常工作。

Fiddle

如何在点击按钮

1 个答案: