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

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行，並使用this使用jQuery隱藏滑塊（請參閱$('.slider').hide(); ）：

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

它應該可以正常工作。

小提琴。

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

問題描述

1 個解決方案

解決方案1
1 2016-01-18 10:48:14

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

問題描述

1 個解決方案

解決方案1 1 2016-01-18 10:48:14

解決方案1
1 2016-01-18 10:48:14