Open psamhaber opened 11 years ago
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:
#
in front of an id selectorwindow.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.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:
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
Hi,
I almost managed to get this to work properly, but I'm failing with this last bit.
To reproduce the error:
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
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')
}
}
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