How to write the code for my jQuery slider in a more object-oriented way?

Question

I built a slider which has functionality of time sliding, slide through buttons and slide through previous and next arrows.

Here is the html:

<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><div class="description"></div></article>
<article id="slide-1" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-2" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-3" style="display:none"><div class="description"><span></span></div></article>
</section>
<ul id="arrows-nav">
<li><a id="prev-arrow" href="#"></a></li>
<li><a id="next-arrow" href="#"></a></li>
</ul>
</div>
<div id="nav-container">
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
</div>

here the css:

#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
position: relative;

}

#sliding-container {
width: 100%;
}

#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-0:before, #slide-1:before, #slide-2:before, #slide-3:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, transparent 1.5%, transparent 99%, black);
}

.description {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
right: 100px;
background: url(/images/description.png);
/*padding: 37px 33px 40px 40px;*/
border-radius: 7px;
}

.title-description{
color:#fff;
}


#arrows-nav {
padding: 0;
margin: 0;
}

#arrows-nav li a {
width: 27px;
height: 45px;
margin: -17px 0 0;
display: block;
position: absolute;
top: 50%;
cursor: pointer;
}

#prev-arrow {
background: url(/Images/prev-arrow.png) no-repeat 0 0;
left: 0px;
}

#next-arrow {
background: url(/Images/next-arrow.png) no-repeat 0 0;
right: 0px;
}

#slider-nav {
text-align: center;
margin: 0 auto;
position: relative;
width: 980px;
padding-top: 10px;
padding-bottom: 10px;
}

#slider-nav:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, #fff, #ddd, #ddd, #fff);
}

#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}

#slider-nav a:hover {
background: #999;
}

#slider-nav a.active {
background: #999;
}

and here the scripting code

<script>
    var $navButtons = $("#slider-nav > a");        
    var $navArrow = $("#arrows-nav  a");
    var timing = 3500;

    Manage();
    SlideShow();
    function SlideShow() {
        var interval = setInterval("SlideSwitch()", timing);

        $('#sliding-container').hover(
            function () {
                clearInterval(interval)
            },
            function () {
                interval = setInterval(SlideSwitch, timing)
            }
            );

        $('#slider-nav').hover(
            function () {
                clearInterval(interval)
            },
            function () {
                interval = setInterval(SlideSwitch, timing)
            }
            );
    }

    function Manage() {
        $navArrow.click(function (event) {
            event.preventDefault();
            var $selectedArrow = $(this);
            var idSelectedArrow = $selectedArrow.attr("id");
            SlideWithArrow(idSelectedArrow);

        });

        $navButtons.click(function (event) {
            event.preventDefault();
            var $selectedButton = $(this);
            var rawIdSlideToFadeIn = $selectedButton.attr("href");
            $navButtons.removeClass("active");
            $selectedButton.addClass("active");

            CrossFading(rawIdSlideToFadeIn);
        });
    };

    function SlideSwitch() {
        var $activeButton = $("#slider-nav > a.active");
        var $nextButton = $activeButton.next().length
            ? $activeButton.next()
            : $('#slider-nav > a:first');

        $activeButton.removeClass("active");
        $nextButton.addClass("active");

        var $activeSlide = $("article.displayed");
        var $nextSlide = $activeSlide.next().length
            ? $activeSlide.next()
            : $('#sliding-container > article:first');

        var idActiveSlide = $activeSlide.attr("id");
        var idNextSlide = $nextSlide.attr("id");

        if (idActiveSlide != idNextSlide) {
            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $nextSlide.addClass("displayed").css("style", "block").fadeIn();
        }
    };

    function SlideWithArrow(idArrow) {
        var $activeButton = $("#slider-nav > a.active");
        var $prevButton = $activeButton.prev().length
            ? $activeButton.prev()
            : $('#slider-nav > a:last');
        var $nextButton = $activeButton.next().length
            ? $activeButton.next()
            : $('#slider-nav > a:first');

        var idPrevArrow = $("#prev-arrow").attr("id");
        var idNextArrow = $("#next-arrow").attr("id");

        var $activeSlide = $("article.displayed");
        var $nextSlide = $activeSlide.next().length
            ? $activeSlide.next()
            : $('#sliding-container > article:first');
        var $prevSlide = $activeSlide.prev().length
            ? $activeSlide.prev()
            : $('#sliding-container > article:last');

        if (idArrow == idPrevArrow) {
            $activeButton.removeClass("active");
            $prevButton.addClass("active");

            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $prevSlide.addClass("displayed").css("style", "block").fadeIn();
        }

        if (idArrow == idNextArrow) {
            $activeButton.removeClass("active");
            $nextButton.addClass("active");

            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $nextSlide.addClass("displayed").css("style", "block").fadeIn();
        }

    };

    function CrossFading(rawIdSlideToFadeIn) {
        var $slideToFadeIn = $(rawIdSlideToFadeIn);
        var $slideToFadeOut = $("article.displayed");
        var idSlideToFadeOut = $slideToFadeOut.attr("id");
        var idSlideToFadeIn = $slideToFadeIn.attr("id");

        if (idSlideToFadeIn != idSlideToFadeOut) {
            $slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
            $slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
        }

    };

</script>

The three functions SlideSwitch(), SlideWithArrow(idSelectedArrow) and CrossFading(rawIdSlideToFadeIn) retrieve each the active button (i.e. those button corresponding to the displayed slide) and the active slide (i.e. the displayed slide).

The code work well but I don't like it: I would like A) to create the object "active button + slide" which incapsulates the "active button and the active slide" state, and B) using this object as a reference for the three functions above instead to demand to these functions the task to retrieve the active button & slide.

Can someone give me any hint to reworking my code in the way I've explained?

Thank you very much.

Answer 1

its better to put your image in a folder, and use ajax to download them. i mean write a function that if user pressed next button ajax runs and download an image, and with jquery html order you can put that new image instead of old image you should read this before coding interval slider with ajax