CODEWITHSUNDEEP
javascriptjquerysliderslideshow
SecretWalrus
SecretWalrus

Reputation: 99

Clicking next on last slide ends slideshow

I've been working on my first slider using javascript/jquery and the slider itself is working except when I'm on my last image if I click next it goes to a blank space and stops. If I just let it fun it loops fine on its own and goes back to the first slide. I've tried making a JSFiddle, but for some reason I can't get it to work at all in fiddle so their may be something wrong with the starting process, I'm not sure. It works fine on my local site other than the problem of no longer working if I click the next button while it's on the last slide.

HTML5

<body>

    <div class="wrapper">
        <div id="slider">
            <img id="1" src="Images/slide_image1.jpg" alt="HDTV">
            <img id="2" src="Images/slide_image2.jpg" alt="Furniture">
            <img id="3" src="Images/slide_image3.jpg" alt="Electronics">
        </div>

        <a href="#" class="left" onclick="prev(); return false;">Previous</a>
        <a href="#" class="right" onclick="next(); return false;">Next</a>
    </div>

    <script src="JS/jquery.js"></script>
    <script src="JS/slider.js"></script>

</body>

CSS3 

.wrapper {
    width: 990px;
    margin: 0 auto;
}

#slider{
    width: 990px;
    height: 270px;
    overflow: hidden;
    margin: 30px auto;
}

#slider > img {
    width: 990px;
    height: 270px;
    float: left;
    display: none;
}

a {
    padding: 5px 10px;
    background-color: #F0F0F0;
    margin-top: 30px;
    text-decoration: none;
    color: #666;
}

a.left {
    float: left;
}

a.right {
    float: right;
}

JavaScript

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
    $('#slider > img#1').fadeIn(300)
    startSlider();
});

function startSlider(){
    count = $('#slider > img').size();

    loop = setInterval(function(){

        if(sliderNext > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        $('#slider > img').fadeOut(300);
        $('#slider > img#' + sliderNext).fadeIn(300);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 3000)
}

function prev() {
    newSlide = sliderInt - 1;
    showSlide(newSlide);
}

function next() {
    newSlide = sliderInt + 1;
    showSlide(newSlide);
}

function stopLoop() {
    window.clearInterval(loop);
}

function showSlide(Id) {
    stopLoop();
    if(Id > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        else if(Id < 1){
            Id = count;
        }

        $('#slider > img').fadeOut(300);
        $('#slider >img#' + Id).fadeIn(300);

        sliderInt = Id;
        sliderNext = Id + 1;
        startSlider();
}

$('#slider > img').hover(
    function() {
        stopLoop();
    },
    function(){
        startSlider();
    }
);

Upvotes: 0

Views: 880

Answers (1)

John S
John S

Reputation: 21492

The issue is with the if-else statement in the showSlide() funciton. It should be:

if (Id > count) {
    Id = 1;
} else if (Id < 1) {
    Id = count;
}

jsfiddle

BTW: I think you could simplify your HTML and JQuery code like this: jsfiddle

Upvotes: 1

Related Questions