CODEWITHSUNDEEP
javascriptjquerycss
Alejandro Guayara
Alejandro Guayara

Reputation: 1

Image Slider buttons not firing

I'm working on a image slider where you can browse them through the prev and next buttons. Actually it's a pretty simple slider, but I'm just starting at jQuery. Here is my script:

$(document).ready(function () {
    var $active = $('.active');
    var $next = $active.next();
    var $prev = $active.prev();

    $('.next').click(function () {
        $next.addClass('active');
        $active.removeClass('active');
    })

    $('.prev').click(function () {
        $prev.addClass('active');
        $active.removeClass('active');
    })
});

//Edit

Here's the HTML:

<div id="imgslider">
        <img src="" class="active"/>
        <img src=""/>
        <img src=""/>
        <div class="slidercontrols">
            <div class="prev">&lsaquo;</div>
            <div class="next">&rsaquo;</div>
        </div>
    </div>

CSS:

    .active{
    z-index: 4;
}

    .prev, .next
{
    position: absolute;
    height: 80px;
    line-height: 55px;
    width: 50px;
    font-size: 100px;
    text-align: center;
    color: #fff;
    top: 50%;
    left: 0;
    z-index: 5;
    margin-top: -25px;
    cursor: pointer;
    opacity: .7;
    transition: all 150ms;
}

The script doesnt work. I mean, when I click either of the buttons they don't do anything, and I don't know if the problem is the script or the html-css file.

Upvotes: 0

Views: 54

Answers (1)

Moorthy GK
Moorthy GK

Reputation: 1301

You have to use common class name for all the images inside the slider.. Before adding class active you have to remove all the active class in that slider. Then you have to add active class for present slider.

HTML :

<img src="image/1.jpg" class="imageClass" />
<img src="image/2.jpg" class="imageClass active" />
<img src="image/3.jpg" class="imageClass" />

JS :

$(document).ready(function() {
    var $active = $('.active');
    var $next = $active.next();
    var $prev = $active.prev();

    $('.next').click(function() {
        //imageClass represents class name used for all images
        $('.imageClass').removeClass('active'); 
        $next.addClass('active');
    });

    $('.prev').click(function() {
        //imageClass represents class name used for all images
        $('.imageClass').removeClass('active');
        $prev.addClass('active');
    });
});

Upvotes: 1

Related Questions