Question

I need some help here. I’m trying to make my own content slider writing my own code but can’t seem to figure this out. I am new and learning all this, so any help would be appreciated. What i’m trying to do is when the user clicks next, it will hide the current slide and display the next. I’m trying to do this with a global variable, but i’m not sure how to maintain the global variable being updated from within the function. Here is some code, I know my explanation isn’t very good.

$(function () {


    var i = '';

    $('.next').click(function() {
        $('.slide' + i).hide();
        i++;
        console.log(i);
        if(i <= 4) {
        $('.slide' + i).show();
        }
        else {
        var i = 1;
        $('.slide' + i).show();
        i++;
        console.log(i);
        }
    });

});

and the markup

<div class="outerWrapper wrapperWidthHeight">
    <div class="innerWrapper wrapperWidthHeight slide1">
    1
    </div>
    <div class="innerWrapper wrapperWidthHeight slide2">
    2
    </div>
    <div class="innerWrapper wrapperWidthHeight slide3">
    3
    </div>
    <div class="innerWrapper wrapperWidthHeight slide4">
    4
    </div>
</div>
<div class="next">NEXT</div>

and the CSS

.wrapperWidthHeight {
    margin:auto;
    width:900px;
    height:600px;
    }

.outerWrapper {
    overflow:hidden;
    position:relative;
    margin-top:10px;
    border:1px solid black;
    border-radius:15px;
    box-shadow: 2px 2px 5px 5px #888;
    }

.innerWrapper {
    position:absolute;
    text-align:center;
    padding:0;
    margin:auto;
    }


.slide1 {
    display:block;
    }

.slide2, .slide3, .slide4 {
    display:none;
    }

.next{
    display:block;
    margin:auto;
    }

Answer 1

Just a couple tweaks to what you had got it working for me:

$(document).ready(function () {

    var i = 1;

    $('.next').click(function () {
        $('.slide' + i).hide();
        i++;
        console.log(i);
        if (i <= 4) {
            $('.slide' + i).show();
        }
        else {
            i = 1;
            $('.slide' + i).show();
            console.log(i);
        }
    });

});