Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Slick carousels problems!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #246632
    jameskape
    Participant

    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/

    1. 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.
    2. 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?

    3. 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,
    James

    #246634
    Shikkediel
    Participant

    On 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.

    #246637
    Shikkediel
    Participant

    You’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.

    #246681
    jameskape
    Participant

    Thanks 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,

    #246682
    Shikkediel
    Participant

    Oh yeah, I totally overlooked another $slideshow in the code:

    $('.slider, .slider2').click(function() {
        $(this).slick('slickGoTo', parseInt($(this).slick('slickCurrentSlide'))+1);
    });
    
    #246690
    jameskape
    Participant

    Perfect! That fixed it, thanks for your help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.