CODEWITHSUNDEEP
jqueryunslider
leemjac
leemjac

Reputation: 55

Unslider next/prev issue when multiple sliders on page

I am using Unslider and I have multiple sliders on a page - all with the same class of slider. The sliders work if navigating via the dots - but the next and prev buttons don't work. When there is only one slider on the page and i run console.log

$('.slider').each(function(){

    var data = $slider.data('unslider');
    console.log(data);

});

I get 'Unslider'

If there are multiple sliders on the page I get 'undefined' and when clicking 'next' or 'prev'

$('.unslider-arrow').click(function(){
        event.preventDefault();

        if ($(this).hasClass('next')) {
            $slider.data('unslider')['next']();
            } else {
            $slider.data('unslider')['prev']();
        };

    });

Uncaught TypeError: Cannot read property 'next' of undefined Uncaught TypeError: Cannot read property 'prev' of undefined

I am assuming it has to do with the way I am writing this:

var data = $slider.data('unslider');

Can someone please help? I am not a js expert so I think it might be an easy solve.

My html is pretty basic, as required.

<div class="slider">
    <ul>
        <li style="background-image:url(/assets/img/slide-test-3.jpg);">
            <span class="caption">Slide 1</span>
        </li>
        <li style="background-image:url(/assets/img/slide-test-1.jpg);">
            <span class="caption">Slide 2</span>
        </li>
        <li style="background-image:url(/assets/img/slide-test-2.jpg);">
            <span class="caption">Slide 3</span>
        </li>
    </ul>

    <a href="#" class="unslider-arrow prev ss-icon ss-gizmo">Previous</a>
    <a href="#" class="unslider-arrow next ss-icon ss-gizmo">Next</a>
</div>
<div class="slider">
    <ul>
        <li style="background-image:url(/assets/img/slide-test-3.jpg);">
            <span class="caption">Slide 1</span>
        </li>
        <li style="background-image:url(/assets/img/slide-test-1.jpg);">
            <span class="caption">Slide 2</span>
        </li>
        <li style="background-image:url(/assets/img/slide-test-2.jpg);">
            <span class="caption">Slide 3</span>
        </li>
    </ul>

    <a href="#" class="unslider-arrow prev ss-icon ss-gizmo">Previous</a>
    <a href="#" class="unslider-arrow next ss-icon ss-gizmo">Next</a>
</div>

Upvotes: 0

Views: 2037

Answers (2)

Uday Hiwarale
Uday Hiwarale

Reputation: 4167

Above solution didn't work for me on multiple slider, this one did

$(document).ready(function (){
    $('.slider').each(function(){
        var $this = $(this);
        $this.unslider({
            speed : 300,
            delay : 10000,
            complete : function () {},
            keys : false,
            dots : true,
            fluid : true
        }).find('.unslider-arrow').click(function(event){
            event.preventDefault();
            if ($(this).hasClass('next')) {
                $this.data('unslider').next();
            } else {
                $this.data('unslider').prev();
            }
        });
    });
});

Upvotes: 0

Anarion
Anarion

Reputation: 1038

You should init arrows withing the each function:

$('.slider').each(function(){
    var $slider = $(this).unslider();
    $(this).find('.unslider-arrow').click(function(event){
        event.preventDefault();
        if ($(this).hasClass('next')) {
            $slider.data('unslider')['next']();
            } else {
            $slider.data('unslider')['prev']();
        };
    });
});

Upvotes: 3

Related Questions