JSSOR - 遍历嵌套滑块中的所有幻灯片和图像答案

【问题标题】：JSSOR - Loop through all slides and images in nested sliderJSSOR - 遍历嵌套滑块中的所有幻灯片和图像
【发布时间】：2014-09-25 13:32:18
【问题描述】：

使用 JSSOR 我有一个嵌套的滑块设置和工作。我浏览了这些选项，但没有看到任何可以让它循环遍历每张幻灯片（选项卡）上的所有图像的地方。它当前循环浏览所选幻灯片（选项卡）上的所有图像，然后您手动选择下一张幻灯片（选项卡），然后循环浏览这些图像。如果我将自动播放选项设置为 true，它会循环播放幻灯片（标签），但不会循环播放该幻灯片中的图像。我希望它自动循环遍历所有选项卡和所有图像。有没有我错过的选项？

【问题讨论】：

标签： slider nested jssor

【解决方案1】：

这就是嵌套滑块的工作方式。没有自动循环所有图像的选项。

如果你想让它循环遍历所有图像，那么你需要手动调用 api。

您可以通过 3 个步骤来实现您的目标。

检测第一个子滑块的当前幻灯片索引。
如果到达最后一张幻灯片，则将主滑块切换到第二个子滑块。
播放第二个子滑块。

打开“nested-slider.source.html”并进行以下更改，

            var childSlider = new $JssorSlider$(containerId, nestedSliderOptions);
            childSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnChildSliderStateChange);
            nestedSliders.push(childSlider);

        function OnChildSliderStateChange(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
            var childSlider = nestedSliders[jssor_slider1.$CurrentIndex()];
            if (progress == progressEnd && slideIndex == childSlider.$SlidesCount() - 1) {
                //last slide (of current chlid sldier) plays over, pause the child slider, and move the main slider next
                childSlider.$Pause();
                childSlider.$GoTo(0);
                jssor_slider1.$Next();
            }
        }

然后你会得到http://www.jssor.com/testcase/nested-slider-loop-through.source.html

【讨论】：

好的，谢谢。如果有要开始查找的函数名称，或者您可以告诉我的任何内容，请指出我在哪里执行此操作的正确方向，我将不胜感激。谢谢！
我知道必须有比我做的方式更优雅的方式:) 非常感谢

【解决方案2】：

可能有更好的方法，但这是我想出的

_SelfSlideItem.$GoForNextSlide = function () {
            if (_SlideshowRunner) {
                var slideshowTransition = _SlideshowRunner.$GetTransition(_SlideCount);

                if (slideshowTransition) {
                    var loadingTicket = _LoadingTicket = $JssorUtils$.$GetNow();

                    var nextIndex = slideIndex + _PlayReverse;
                    var nextItem = _SlideItems[GetRealIndex(nextIndex)];
                    return nextItem.$LoadImage($JssorUtils$.$CreateCallback(null, LoadSlideshowImageCompleteEventHandler, nextIndex, nextItem, slideshowTransition, loadingTicket), _LoadingScreen);
                }
            }
            if ((_SlideCount - (slideIndex + _PlayReverse)) == 0){
                **//get reference to the tab selectors
                var nodes = document.querySelectorAll("[u=thumbnavigator] .jssort12 [debug-id=slide-board] [debug-id]");
                //loop through them and find the one that's selected (.pav) and if it's not the one at the end of the list, select the next one, otherwise start at the beginning again
                for (i=0; i<nodes.length; i++){
                    if (nodes[i].querySelectorAll(".pav").length)
                        if ((i+1) == nodes.length)
                            document.querySelectorAll("[class^=p]")[0].click();
                        else
                            document.querySelectorAll("[class^=p]")[i+1].click();
                }**
            }
            PlayTo(_CurrentSlideIndex + _Options.$AutoPlaySteps * _PlayReverse);
        };

【讨论】：