Unslider JQuery Click Change Slide

Question

Im building my portfolio site at the moment and have an Unslider.com gallery on the case studies page. I want the user to be able to click the next or previous buttons I have created myself and given the class names to called .next and .prev. Here is my JQuery code.

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

I know Unslider comes with next and previous buttons but I need to do this myself for the intended effect. Any suggestions to why the code isn't working would be appreciated. I know the JQuery click is linked to the right html elements because I tried adding an alert onto the function when I clicked the element and it displayed the alert correctly.

Thanks, Jamie

Alex Howes · Answer 1 · 2016-07-07T13:53:31.723

7

Not used unslider before, but I think

unslider('animate:next');

and

unslider('animate:prev');

needs to be

slider.unslider('next');

and

slider.unslider('prev');

Note: you need to reference the unslider method on the slider variable you created

edited Jul 07 '16 at 13:53

answered Jul 05 '16 at 15:23

Alex Howes

454
3
12

I would strongly believe trying to do something that is done already is simple wastage of time... If their is a simple option that enables prev and next link IMO it's best to use it instead of using custom html and making it work with custom js... – shramee Jul 07 '16 at 13:41
One can always use CSS to make it look the way one wants ;) – shramee Jul 07 '16 at 13:42
Completely depends on the situation. I was following from the fact OP said "I know Unslider comes with next and previous buttons but I need to do this myself for the intended effect. " ;) – Alex Howes Jul 07 '16 at 13:44
Aah... missed that bit :-P :-) – shramee Jul 07 '16 at 13:45

score 1 · Answer 2 · answered Jul 07 '16 at 09:00

1

In your click functions, you need to say:

$('.gallery').unslider('next');

This is because you need to tell Unslider what slider you want to control, and then the method to call (next, not animate:next).

answered Jul 07 '16 at 09:00

Nate

1,268
13
20

score 0 · Answer 3 · answered Jul 04 '16 at 09:58

You can set arrows to true( or remove arrows : false, from your code since default is true )...

You'll see Next and Prev links, these change the slide, just style these by css the way you like :-)

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        nav : false,
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
</div>

Your init code will look something like this... ( removed arrows : false,, it's true by default ;-) )

var slider = $('.gallery').unslider({
    autoplay : true,
    nav : false,
    animation : 'fade',
});

score 0 · Accepted Answer · answered Jul 08 '16 at 04:48

New answer for

I know Unslider comes with next and previous buttons but I need to do this myself for the intended effect.

Okay now you may have some pretty nice arrows with icons and custom text, in that case as @Alex Howes said you may wanna incorporate custom functionality.

Now, besides using

slider.unslider('next');

and

slider.unslider('prev');

It doesn't work because for me unslider.ready event doesn't seem to fire, we don't need to use it anyways, just get for functionality outside slider.on('unslider.ready', function() { and }); and it works like a charm :)

You code will look something like this...

jQuery(document).ready(function($) {

  var slider = $('.gallery').unslider({
    autoplay: true,
    nav: false,
    arrows: false,
  });
  $(".prev").click(function() {
    slider.unslider('prev');
  });
  $(".next").click(function() {
    slider.unslider('next');
  });

});

.gallery {
  position: relative;
}
.next,
.prev {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  font: 25px sans-serif;
  color: #fff;
  transition: opacity 500ms;
  cursor: pointer;
  text-shadow: 0 0 2px #000;
}
.gallery:hover .next,
.gallery:hover .prev {
  opacity: 1;
}
.next {
  left: auto;
  right: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
  <div class='prev'><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous slide</div>
  <div class='next'>Next slide <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>

</div>

Hope that helps :)

Unslider JQuery Click Change Slide

4 Answers4