Question

我在主页面上有多个全屏royalsliders。我想获得每个滑块的幻灯片索引。是否可以通过使用for循环或其他东西在一个代码中执行此操作？ html是;

<div id="page">
        <div id="ref1" class="screen">
            <div class="royalSlider rsDefaultInv">
                <img src="images/projects/1.jpg" />
                <img src="images/projects/1.jpg" />
            </div> 
            <div class="slider-detail">
                <div class="box hdd">
                    <div class="detail-left">Project 1 <span>/BRANDING</span></div>
                    <div class="detail-right">
                        <a class="detail-btn fr" href="javascript:void(0)" rel="nofollow"></a>
                    </div>
                    <div class="bg"></div>
                </div>
            </div>
            <div class="project-detail">
                <p class="big-text">Project 1 info</p>
                <a class="link" href="#" title="">WEBSITE</a>
            </div>
        </div>
        <div id="ref2" class="screen">
            <div class="royalSlider rsDefaultInv">
                <img src="images/projects/2.jpg" />
                <img src="images/projects/2.jpg" />
            </div> 
            <div class="slider-detail">
                <div class="box hdd">
                    <div class="detail-left">Project 2 <span>/BRANDING</span></div>
                    <div class="detail-right">
                        <a class="detail-btn fr" href="javascript:void(0)" rel="nofollow"></a>
                    </div>
                    <div class="bg"></div>
                </div>
            </div>
            <div class="project-detail">
                <p class="big-text">Project 2 info</p>
                <a class="link" href="#" title="">WEBSITE</a>
            </div>
        </div>
     </div>

这是js;

jQuery(document).ready(function($) {

var rsi = $（＆＃39;＃ref1 .royalSlider，＃ref2 .royalSlider＆＃39;）。royalSlider（{     autoHeight：false，     arrowsNav：是的，     globalCaption：假的，     arrowsNavAutoHide：false，     fadeinLoadedSlide：false，     controlNavigationSpacing：30，     controlNavigation：＆＃39; null＆＃39;，     imageScaleMode：＆＃39; fill＆＃39;，     imageAlignCenter：false，     addActiveClass：真实，     循环：是的，     loopRewind：true，     numImagesToPreload：4，     keyboardNavEnabled：true，     autoScaleSlider：false，
    autoScaleSliderWidth：640，
    autoScaleSliderHeight：360，     imgWidth：1920，     imgHeight：1080

}）的数据（＆＃39; royalSlider＆＃39）;

$('.screen').each(function() {
    var slider = $(this).children();
    for (var i = 1; i < $(slider).length; i++) {
        var ref = '#ref'+i
        var sliderInstance = $(ref) + ' ' + slider.data('royalSlider');
    }       

    if (sliderInstance) {           
        var slideCounter = $('<div class="sliderCount"></div>').appendTo($(ref + ' ' + '.slider-detail .box .detail-right'))
        var updCount = function() {
            slideCounter.html( (sliderInstance.currSlideId+1) + ' / ' + sliderInstance.numSlides );
        }
        sliderInstance.ev.on('rsAfterSlideChange', updCount);
        updCount();
    }

});

}）;

问题解决了！代码应该是这样的;

$('.royalSlider').each(function() {
    var slider = $(this);
    var sliderInstance = slider.data('royalSlider');

    if(sliderInstance) {
        var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider.next().find('.detail-right') );

        var updCount = function () {
            slideCounter.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
        }
        sliderInstance.ev.on('rsAfterSlideChange', updCount);
        updCount();
    }

});

多个royalslider索引指示器在同一页面上

0 个答案: