Jquery 有多个BXSLIDER，具有自定义的nextSelector和prevSelector_Jquery_Bxslider

Jquery 有多个BXSLIDER，具有自定义的nextSelector和prevSelector

jquery

Jquery 有多个BXSLIDER，具有自定义的nextSelector和prevSelector,jquery,bxslider,Jquery,Bxslider,我想单独控制一个页面上有多个bxslider。问题是我不知道如何控制他们的下一个和上一个选择器，因为它们将使用相同的名称。或者，我想我想要单独控制它们，而不需要为它们的下一个和上一个按钮编写单独的函数如何使用数组有效地实现这一点，以便我可以单独控制它们，而无需为每个数组编写代码以下是我正在做的：- var questionslider = $('.bxslider').bxSlider({ nextSelector: '#slider-next', prev

我想单独控制一个页面上有多个bxslider。问题是我不知道如何控制他们的下一个和上一个选择器，因为它们将使用相同的名称。或者，我想我想要单独控制它们，而不需要为它们的下一个和上一个按钮编写单独的函数

如何使用数组有效地实现这一点，以便我可以单独控制它们，而无需为每个数组编写代码

以下是我正在做的：-

var questionslider = $('.bxslider').bxSlider({

        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: 'Next Question',
        prevText: '←',
        pager: false,
        infiniteLoop: false,
        hideControlOnEnd: true

    });

    var questionslider2 = $('.bxslider2').bxSlider({

        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: 'Next Question',
        prevText: '←',
        pager: false,
        infiniteLoop: false,
        hideControlOnEnd: true

    });

这是我如何做下一个选择器，我不需要上一个按钮

if ($('#slider-next a.bx-next').is(".disabled")) {

    $('#questions .continue').hide();
}
    else { $('#questions .continue').show(); }

最后，HTML是：-

         <li class="question">
                <div class="overview">
                <h2>Title goes here</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec hendrerit ligula. Ut non justo in massa bibendum rutrum ac eu massa. Pellentesque in arcu dui. Nulla sollicitudin dui sed commodo congue. Nulla facilisi. Vivamus ante neque, scelerisque et adipiscing sit amet, hendrerit tempus magna. Ut vel eros in sapien condimentum sodales at gravida velit. Nullam dolor enim, lobortis nec hendrerit eget, vulputate sit amet eros. Quisque varius, ligula sed luctus pretium, justo sem interdum nunc, suscipit accumsan velit nunc eget nibh. Nunc justo leo, dignissim ac est ut, lacinia dictum nulla. Nullam odio nibh, faucibus sed felis nec, interdum ornare nulla.</p> 
                </div>

                <img src="images/a-laptop-1.png" class="laptop">

                <div class="q">

                    <ul class="bxslider question-slide">

                        <li>

                            <p>1. Nullam odio nibh, faucibus sed felis nec, interdum ornare nulla?</p>

                            <ul>
                                <li><a href="#"><span>A.</span> 1/4</a><span class="extra">X.1%</span></li>
                                <li><a href="#"><span>B.</span> 1/2</a><span class="extra">X.7%</span></li>
                                <li><a href="#"><span>C.</span> 1/3</a><span class="extra">X.4%</span></li>
                                <li><a href="#" class="correct"><span>D.</span> 2/3</a><span class="extra">X.1%</span></li>
                            </ul>
                        </li>

                        <li>

                            <p>2. Nullam odio nibh, faucibus sed felis nec, interdum ornare nulla?</p>

                            <ul>
                                <li><a href="#"><span>A.</span> 1/4</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>B.</span> 1/2</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>C.</span> 1/3</a><span class="extra">X.X%</span></li>
                                <li><a href="#" class="correct"><span>D.</span> 2/3</a><span class="extra">X.x%</span></li>
                            </ul>
                        </li>

                    </ul>
                    <div class="continue">
                      <p><span id="slider-next"></span></p>
                    </div>
            </div>


        </li>

        <li class="question">
                <div class="overview">
                <h2>Title goes here</h2>
                    <p>Quisque nec hendrerit ligula. Ut non justo in massa bibendum rutrum ac eu massa. Pellentesque in arcu dui. Nulla sollicitudin dui sed commodo congue. Nulla facilisi. Vivamus ante neque, scelerisque et adipiscing sit amet, hendrerit tempus magna. Ut vel eros in sapien condimentum sodales at gravida velit. Nullam dolor enim, lobortis nec hendrerit eget, vulputate sit amet eros. Quisque varius.</p> 
                </div>

                <img src="images/laptop-1.png" class="laptop">

                <div class="q">

                    <ul class="bxslider2 question-slide">

                        <li>

                            <p>1. Nullam odio nibh, faucibus sed felis nec, interdum ornare nulla?</p>

                            <ul>
                                <li><a href="#"><span>A.</span> 1/4</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>B.</span> 1/2</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>C.</span> 1/3</a><span class="extra">X.X%</span></li>
                                <li><a href="#" class="correct"><span>D.</span> 2/3</a><span class="extra">X.X%</span></li>
                            </ul>
                        </li>

                        <li>

                            <p>2. Nullam odio nibh, faucibus sed felis nec, interdum ornare nulla??</p>

                            <ul>
                                <li><a href="#"><span>A.</span> 1/4</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>B.</span> 1/2</a><span class="extra">X.X%</span></li>
                                <li><a href="#"><span>C.</span> 1/3</a><span class="extra">X.X%</span></li>
                                <li><a href="#" class="correct"><span>D.</span> 2/3</a><span class="extra">X.X%</span></li>
                            </ul>
                        </li>

                    </ul>
                    <div class="continue">
                      <p><span id="slider-next"></span></p>
                    </div>
            </div>


        </li>


标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是亨德雷特·利古拉。但在马萨的非胡斯托-比本杜姆-鲁特鲁姆-ac-eu马萨。阿库堆的佩伦茨克。在康多康格酒后喝得酩酊大醉。无便利。安特·内克、权杖和艾米特·亨德雷特·坦普斯·麦格纳的告别。在怀孕的时候，sapien调味品苏打水里的性爱是怎样的。多洛尔·埃尼姆（Nullam dolor enim）、内格罗蒂斯·亨德雷特·埃吉特（lobortis nec hendrerit eget）和阿梅特·厄罗斯（amet eros）。葡萄品种、舌苔、舌苔、浆果、浆果。纳克·胡斯托·利奥，尊贵的人，无主的圣歌。努拉姆·奥迪奥·尼布、福西布斯·塞德·菲利斯·内克、因特杜姆·奥纳尔·努拉。


一,。你是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说

X.1%
X.7%
X.4%
X.1%



二,。你是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说

X.X%
X.X%
X.X%
X.X%






标题在这里
我是亨德雷特·利古拉。但在马萨的非胡斯托-比本杜姆-鲁特鲁姆-ac-eu马萨。阿库堆的佩伦茨克。在康多康格酒后喝得酩酊大醉。无便利。安特·内克、权杖和艾米特·亨德雷特·坦普斯·麦格纳的告别。在怀孕的时候，sapien调味品苏打水里的性爱是怎样的。多洛尔·埃尼姆（Nullam dolor enim）、内格罗蒂斯·亨德雷特·埃吉特（lobortis nec hendrerit eget）和阿梅特·厄罗斯（amet eros）。奎斯克·瓦里乌斯。


一,。你是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说

X.X%
X.X%
X.X%
X.X%



二,。不知道该怎么办，该怎么办，该怎么办

X.X%
X.X%
X.X%
X.X%

您只需重命名第二个滑块的prev和next按钮，然后用新名称初始化它：

var questionslider2 = $('.bxslider2').bxSlider({

    nextSelector: '#slider-next2',
    prevSelector: '#slider-prev2',
    nextText: 'Next Question',
    prevText: '←',
    pager: false,
    infiniteLoop: false,
    hideControlOnEnd: true

});

工作示例：

例子： HTML:

问题是，它实际上是一个问卷，如果我继续添加滑块，它只会添加大量冗余代码。我希望我可以通过阵列来完成，并实现自动化。非常感谢。首先，即使我采用您的方法，我如何控制多个“下一步”和“上一步”按钮？谢谢。简单地说，每个滑块都需要外部div作为控制支架。这个代码段应该做到这一点：if（$（'.continue'）.find（'#slider next a.bx-next'）.is（“.disabled”）{$（'#questions.continue'）.hide（）；}else{$（'#questions.continue'）.show（）；}在这种情况下，无论您有多少个导航按钮。实际上，您提到的代码混淆了，它只是忽略了第二个bxslider（bxslider2）。

<html>
    <head>
        <title>Examples | Responsive jQuery Slider | bxSlider</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="keywords" content="content slider, responsive image gallery, responsive image gallery, image slider, image fade, image rotator" />
        <meta name="description" content="Respsonsive jQuery content slider." />
        <meta name="google-site-verification" content="25AuAMRK4hudMM4ZYCQnmQp9W9XtTtsutIDiZmKnjOo" />

        <link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
        <link rel="stylesheet" href="http://bxslider.com/css/styles.css" type="text/css" />
        <link rel="stylesheet" href="http://bxslider.com/css/github.css" type="text/css" />

        <!--[if lt IE 9]>
   <script src="/js/html5shiv.js"></script>
   <![endif]-->

        <script src="http://bxslider.com/js/jquery.min.js"></script>


        <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
        <script src="http://bxslider.com/js/rainbow.min.js"></script>
        <script src="http://bxslider.com/js/scripts.js"></script>
    </head>

    <body class="example-item">



        <h1>Custom next / prev control selectors</h1>

        <div class="slider">
            <ul class="bxslider">
                <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
                <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
                <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
            </ul>

            <div class="outside">
                <h3>This div is outside of the slider</h3>
                <p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
            </div>
        </div>

        <h1>Custom next / prev control selectors</h1>

        <div class="slider">
            <ul class="bxslider2">
                <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
                <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
                <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
            </ul>

            <div class="outside">
                <h3>This div is outside of the slider</h3>
                <p><span id="slider-prev2"></span> | <span id="slider-next2"></span></p>
            </div>
        </div>        
    </body>
</html>

$(document).ready(function(){

    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: 'Onward &rarr;',
        prevText: '&larr; Go back'
    });

    $('.bxslider2').bxSlider({
        nextSelector: '#slider-next2',
        prevSelector: '#slider-prev2',
        nextText: 'Onward &rarr;',
        prevText: '&larr; Go back'
    });    
});