3

I'm trying to use slick carousel (https://github.com/kenwheeler/slick) and they have a method slickNext() which triggers the next slide in the carousel.

Right now my html file looks like this:

<div class="slick-slider">
  <div><%= image_tag "1.jpg"%></div>
  <div><%= image_tag "1.jpg"%></div>
  <div><%= image_tag "1.jpg"%></div>
</div>

<i class="fa fa-angle-right"></i>


<script type="text/javascript">
$("fa-angle-right").click(function(e) {
    $("fa-angle-right").slickNext();
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.slick-slider').slick({
            dots: true
        });
    (jQuery)});
</script>

However this is not working and I can't really figure out why. Thanks

5
  • Also, don't you want the click method to call $('.slick-slider').slickNext()?
    – Uxonith
    May 27, 2014 at 23:34
  • I added the dot to fa-angle-right but it still didn't work. But the I'm trying to trigger the next slide while clicking the icon so why would I need to call the action on the slide itself? Sorry but don't know much of javascript
    – Leo Costa
    May 27, 2014 at 23:36
  • It's alright, I'm fairly new as well. You are clicking on the icon, but you want the slider to move on to the next slide.
    – Uxonith
    May 27, 2014 at 23:39
  • So I just add this and delete the whole fa-angle-right script?
    – Leo Costa
    May 27, 2014 at 23:43
  • I'll leave an answer assuming how I think it should work...
    – Uxonith
    May 27, 2014 at 23:50

8 Answers 8

10

Actually a part of RUS's answer is correct. It should be:

<script type="text/javascript">
$('.fa-angle-right').click(function() {
    $('.fa-angle-right').slick('slickNext');
});
</script>
4
  • is there any callback for this function like calling a function when slide is complete moving. Jul 20, 2018 at 15:31
  • 1
    I think afterChange is what you need like this. //On after slide change $('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){ console.log("change occurred"); }); See events on the slick website (kenwheeler.github.io/slick) Jul 21, 2018 at 16:44
  • that is the callback for back next even if i click on arrows i need callback only if i call above method pragmatically. Jul 21, 2018 at 18:18
  • No if you call the slide change programatically you will need to create your own callback. Shouldn't be too difficult just initiate a timer to constantly check if the current image has changed, when it has call your event and dispose of the timer. Jul 22, 2018 at 15:23
5

So you are pressing a button to try to get the slick slider to move to the next slide. You need the . for line that handles the click, and then the slickNext() is handled by the slider, so it should be as follows:

<script type="text/javascript">
$(".fa-angle-right").click(function(e) { // Added a '.'
    $(".slick-slider").slickNext(); // Switched to '.slick-slider'
});
</script>
2
  • 6
    Not sure if it's the older version, but currently, you call slick methods like this: $('.slick-slider').slick('slickNext');
    – Malyo
    Sep 23, 2015 at 10:07
  • Honestly I never really used slick and just answered this from a generic JQuery/js standpoint and was answering the issues referenced in the question above.
    – Uxonith
    Sep 24, 2015 at 15:16
5
$('.fa-angle-right').slick('slickNext');

You have first call the slick object then pass the parameter "slickNext always.

4
$('#banner-side-btns .s-prev').click(function(){
    $("#banner-carousel").slick("slickPrev");
});
$('#banner-side-btns .s-prev').click(function(){
    $("#banner-carousel").slick("slickNext");
});
2
  • Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem.
    – Drenmi
    Oct 26, 2015 at 13:04
  • I want to mark this as the answer, just because it's what the documentation mentions... but I can't get it to work with this code either
    – Cryothic
    Nov 6, 2015 at 9:12
1

Try this:

$("fa-angle-right").slick('slickNext');
1

Using .slick('slickNext') instead of .slickNext() should do the trick:

<script type="text/javascript">
$(".fa-angle-right").click(function(e) { 
    $(".slick-slider").slick('slickNext'); 
});
</script>
1
  • Please add an explanation on how this is an answer to the question. Don't just drop a piece of code. Dec 22, 2015 at 14:39
0

fa-angle-right is a type selector. It will select <fa-angle-right> elements.

Your italic element (why are you using an italic element?!) is a member of the class fa-angle-right, so you need to use a class selector which starts with a . character.

$(".fa-angle-right")
0

This selector can't be correct $("fa-angle-right") because this means it will search for an element called !

I think what you want is the class selector which must start with a dot:

<script type="text/javascript">
$(".fa-angle-right").click(function(e) {
    $(".fa-angle-right").slickNext();
});
</script>

So jQuery selectors work in a very similar way to CSS selectors :)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.