CODEWITHSUNDEEP
slidernestedjssor
a344254
a344254

Reputation: 609

JSSOR - Loop through all slides and images in nested slider

using JSSOR I've got a nested slider setup and working. I've looked through the options but don't see anywhere where I can make it loop through all of the images on each of the slides (tabs). It currently loops through all of the images on the selected slide (tab), then you have manually select the next slide(tab) and then it loops through those images. If I set the AutoPlay option to true, it loops through the slides(tabs), but doesn't loop through the images in that slide. I'd like it to loop through all tabs and all images automatically. Is there an option I'm missing?

Upvotes: 1

Views: 460

Answers (2)

jssor
jssor

Reputation: 6985

That's way the nested slider works. There is no option to loop though all images automatically.

If you like to make it loop though all images, you need manual api call then.

You can go though 3 steps to reach your goal.

  1. Detect current slide index of the first child slider.
  2. If it reaches the last slide, then switch the main slider to the second child slider.
  3. Play the second child slider.

Open 'nested-slider.source.html' and make following changes,

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

And then you will get http://www.jssor.com/testcase/nested-slider-loop-through.source.html

Upvotes: 1

a344254
a344254

Reputation: 609

There's probably a better way to do it, but here's what I came up with

_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);
        };

Upvotes: 0

Related Questions