Question

I try to write a content slider like following

SCRIPT

$(document).ready(function () {
    $(".nav_button:first").addClass("nav_button_active");
    $(".nav_button").click(function () {
        $(".content_wrapper .content:nth-child(" + $(this).text() + ")").show().siblings().hide();
        $(this).addClass("nav_button_active").siblings().removeClass("nav_button_active");
    });
});

HTML

<div class="main_slider">
    <div class="content_wrapper">
        @foreach (var item in Model)
        {
            <div class="content">
                <img src="~/@item.BigImageUrl" alt="@item.Description" width="600" height="300" />
            </div>
        }
    </div>
    <div class="nav_bar">
        @for (int i = 1; i <= Model.Count(); i++)
        {
            <div class="nav_button">@i</div>
        }
    </div>
</div>

CSS

.content_wrapper {
    height: 300px;
}

.content {
    display: none;
}

    .content:first-child {
        display: block;
    }

.nav_bar {
    height: 30px;
    background-image:url(Content/images/gradient2.png);
}

.nav_button {
    float: left;
    height: 30px;
    width: 38px;
    line-height:30px;
    text-align:center;
    border-right:2px groove #fff;
    cursor:pointer;
    font-weight:bold;
}

.nav_button_active{
    background-color:#0026ff;
    color:#fff;
}

This codes work fine, but I want this to work with timer. I cant do what I want. How Can I add auto change with timer event. Code examples or a starting point.

Thanks.

Answer 1

I solved it like following, But I dont know is this the best way.

$(document).ready(function () {
    var count = '@Model.Count()';
    var i = 1;
    window.setInterval(yourfunction, 1000);

    function yourfunction() {
        $(".content_wrapper .content:nth-child(" + i + ")").show().siblings().hide();
        $(".nav_button:nth-child(" + i + ")").addClass("nav_button_active").siblings().removeClass("nav_button_active");
        i++;
        if (i > count) {
            i = 1;
        }
    }

    $(".nav_button:first").addClass("nav_button_active");
    $(".nav_button").click(function () {
        $(".content_wrapper .content:nth-child(" + $(this).text() + ")").show().siblings().hide();
        $(this).addClass("nav_button_active").siblings().removeClass("nav_button_active");
        i = $(this).text();
    });
});