Question

我在页面上有多个bxSliders，我想单独控制。问题是我不知道如何控制他们的下一个和上一个选择器，因为他们将使用相同的名称。或者我认为我想分别控制它们而不为它们的下一个和前一个按钮编写单独的功能。

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

以下是我正在做的事情： -

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

    });

以下是我在做NextSelector的方法，我不需要上一个按钮。

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>

Answer 1

您只需重命名第二个滑块的上一个和下一个按钮，然后使用新名称对其进行初始化：

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

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

});

工作示例：http://jsfiddle.net/Gajotres/EbdJg/

实施例

HTML：

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

的JavaScript：

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

有多个BxSliders，带有自定义的nextSelector和prevSelector

1 个答案:

实施例

HTML：

的JavaScript：