Multiple swipe instances on one page?

[psamhaber]

How would one go about setting up multiple (10+) slideshows, each with controls, on the same page, in a dynamic way?

Something like this (nonworking) : http://jsfiddle.net/HEhQP/1/

I'm learning jquery and js, so the fiddle might be quite nonsensical but I thought this might be the best place to start (asking), please close/ignore if I am out of line!

edit: Native support for multiple slideshows in swipe.js would be nice, but since my understanding of js and variable scope is still far too limited to see if this might even be possible with a few lines of code I shall ask about it when I understand it. :)

Cheers Phil

[alicelieutier]

I corrected and updated your fiddle the way I guess you wanted it to work: http://jsfiddle.net/rTC3n/1/ It had several errors, among which:

• you need to use # in front of an id selector
• the classes were not defined properly for the buttons
• you were confusing window.currentsliderid and window[currentsliderid]. You want to use the latter here, so you'll have window.slider_01 and window.slider02 instead of a window.currentsliderid object which was overwritten each time.
• still, this is not the best, because it makes use of global variables. You don't know that the window doesn't have an object with the same name as one of your slider ids. One way to mitigate this would be to use a unique global variable for you custom app variable.

[psamhaber]

Alice, thank you very much for helping me out with this, I hope I can return the favor one time.

By defining a global App variable you mean moving the whole slideshow /buttons setup that's currently inside the slideToggle function into its own function, something like: var slideshowsetup = function() { ... }) ?

Some context to what I am trying to achieve:

• On siteload, only the first image of each slideshow is loaded
• On click, rest of the images for that specific slideshow gets loaded (ajax), slideshow is initialized.

I suppose there has to be a better way to solve this than my logic (now that the fiddle code is working I noticed that repeatedly toggling the div will actually break the slideshows at some point).

And going back to my original issue, is there maybe an easier way to (dynamically) setup multiple slideshows on the same page with slidejs, with either plain js or jquery?

Again, thank you for your time!

Edit: I fixed the multiple triggering, now the slideshow is only setup once with the first click: http://jsfiddle.net/rTC3n/2/ So the next step would be to limit the scope from global to local I suppose. will read up on the window object and see if I can figure this out myself..

cheers Phil

[psamhaber]

Hi,

I almost managed to get this to work properly, but I'm failing with this last bit.

To reproduce the error:

1. Open http://jsfiddle.net/Agyc8/4/embedded/result/ and click on the first section headline
2. Click on the same headline again to close
3. Resize the window to trigger the media query
4. Click on the first section headline again

It breaks because when the media query activates setup() the parent is hidden at that time, so the height gets returned as 0. Of course if you resize the browser window after step 4 above, it will "fix" the swipe instances since it automatically triggers setup().

So either setup() must only be called on the visible swipe.js instances (this would require rewrites in swipe.js right?) or I figure out a way to initialize setup() from inside the click toggle function?

Any other ideas for this? How can I initiate setup() in this case? Again, this is where I'm at: http://jsfiddle.net/Agyc8/4/

Cheers phil

[jackbarham]

Here's my example I got working (thanks to this thread) using index and native Javascript.

HTML (Laravel blade - Note the: {{$loop->index}})

<section class="module slider" data-module-count="{{ $loop->index }}">
    <span class="slider__prev slider__prev-{{$loop->index}}"><i class="ui-icon-arrow-left"></i></span>
    <span class="slider__next slider__next-{{$loop->index}}"><i class="ui-icon-arrow-right"></i></span>
    <div class="swipe swipe-{{$loop->index}}" data-delay="{{ $slider->content->delay }}" data-speed="{{ $slider->content->speed }}">
        <div class="swipe-wrap">
            @foreach($slider->content->items as $item)
                <div class="slider__item">
                    <span class="slider__img" style="background-image: url('{{ $item->image }}')"></span>
                    <span class="slider__text">{{ $item->title }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>

Here is the Javascript

var slider = document.getElementsByClassName('slider')

// Loop through all .slider and get index
for (var i = 0; i < slider.length; i++) {

    // Get the ID (count) for each slider
    const count = slider[i].dataset.moduleCount

    // Match count from $loop->index in HTML
    const prev = document.querySelector('.slider__prev-' + count)
    const next = document.querySelector('.slider__next-' + count)
    const swipe = document.querySelector('.swipe-' + count)

    // New up a Swipe instance
    window.mySwipe = new Swipe(swipe, {
        startSlide: 0,
        speed: parseInt(swipe.dataset.speed),
        auto: parseInt(swipe.dataset.delay),
        draggable: true,
        continuous: true,
        disableScroll: false,
        stopPropagation: false,
        callback: function(index, elem, dir) {},
        transitionEnd: function(index, elem) {}
    })

    // Slider controls
    prev.onclick = mySwipe.prev
    next.onclick = mySwipe.next

    // Hide controls if only 1 slide
    if (mySwipe.getNumSlides() < 1) {
        prev.classList.add('hide')
        next.classList.add('hide')
    }
}