Im building my portfolio site at the moment and have an Unslider 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 es 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

Im building my portfolio site at the moment and have an Unslider. 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 es 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

• javascript
• jquery
• jquery-plugins
• unslider

4 Answers 4

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

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

New answer for

I know Unslider es 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./ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider./img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider./img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider./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 :)

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider./img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider./img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider./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',
});