Home › Forums › JavaScript › Slick carousels problems!
- This topic is empty.
-
AuthorPosts
-
October 16, 2016 at 1:35 pm #246632jameskapeParticipant
Hey guys,
I’m having some Slick-carousels problems with a couple of different styled carousels I’ve coded… (Note: I’m not a proper coder, so sorry if this is obvious stuff)
See the code here: http://jameskape.com/help/
- I created a function so that when you click the slide, it moves to the next but for some reason this function affects both carousels (one below too) and I can’t figure out how to fix it so that it only affects the slider clicked.
-
The click function i created above doesn’t work at all here? How do i fix this? I also can’t seem to figure out how to centre each slide?
-
Again can’t get the click function to work here or how to centre the slide. I also want to maintain a 60px padding either side of the centred slide.
Would be really grateful to anyone who might know how to fix these bugs!
Cheers,
JamesOctober 16, 2016 at 3:08 pm #246634ShikkedielParticipantOn the first question – the last instance of defining
$slideshow
is$('.slider')
which means all of the elements with that class and overwrites what was assigned earlier. Give this a try:$('.image').click(function() { $(this).parent().slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1); });
Might fix other things as well. In any case, you could probably remove all the
$slidehow =
declarations and only leave the method initiation there.October 16, 2016 at 4:22 pm #246637ShikkedielParticipantYou’ll see that if you click on the second example, that the upper two slideshows will change their image. So it has the event listener but the element itself isn’t included in
$('.slider')
.Having a second look at it, the above code will likely not work for all sliders because there seems to be more nesting going on with the other examples. I would therefore give them all a common class and try this instead:
$('.image').click(function() { $(this).closest('.someclass').slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1); });
This seems to work for centering the second example:
.slick-slide img { margin: auto; }
The last question is probably the trickiest. Dimensions are set inline by the slider script…
Edit – actually, why not out the event listener on the slider itself?
$('.slider, .slider2').click(function() { $(this).slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1); });
I left out the third example because it might be counterintuitive when the left image is clicked.
October 17, 2016 at 12:13 pm #246681jameskapeParticipantThanks so much for the above! I think I’ll park carousel idea 3 for the time being then, if its too tricky.
But for the above, theres one little bug with the code. I’ve updated it here: http://jameskape.com/help2/
In short the click function doesn’t seem to work on the 2nd and 3rd slider after you have clicked to the second slide on either carousel?
Any idea why? Thanks again!
cheers,
October 17, 2016 at 12:36 pm #246682ShikkedielParticipantOh yeah, I totally overlooked another
$slideshow
in the code:$('.slider, .slider2').click(function() { $(this).slick('slickGoTo', parseInt($(this).slick('slickCurrentSlide'))+1); });
October 17, 2016 at 1:55 pm #246690jameskapeParticipantPerfect! That fixed it, thanks for your help!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.