Reputation: 1888

How to make a jquery slider from scratch

I've been asked at a job application to make jQuery slider plugin from scratch.

I just graduated as a Computer Science Engineer and to be honest, I've never been taught in college about jQuery. At all.

The little I know about it, is because I've read docs and experimented a little.

But a jQuery slider is very very far away from my current abilities.

I was reading this article on github http://rafbm.github.io/howtomakeaslider/ which is quite illustrative, but still it would be worthless to just copy the code (which by the way I do not understand fully), because what I need/want is to understand how to do one.

On the small free-lance jobs I've done, it's been easy because I just look for plugins, but now I realize that I need to start learning how to make these by myself, and it would be good to start by doing a slider.

What are the things I need? Like I was reading I should create a slider class and create methods for next(), prev() and goTo() sliding-methods. The problem is that for what I hear javascript/jQuery is not a pure OOP language, and it is done differently.

What are the basic things I need to store the images inside an array, know the current position and slide to the next/previous one?

Help would be much appreciated. My HTML and CSS markup is the following:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Slider Plugin</title>
            <style type="text/css">
                a{
                    text-decoration: none;
                    color: black;
                    text-align: center;
                }
                .slider{
                    width: 300px;
                    height: 200px;
                    overflow: hidden;
                    float: left;
                }
                .slider > ul{
                    position: relative;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    -webkit-transition: 0.5s left;
                    -moz-transition: 0.5s left;
                    -ms-transition: 0.5s left;
                    -o-transition: 0.5s left;
                }
                .slider > ul li img{
                    width: 300px;
                    height: 200px;
                    overflow: hidden;
                }
                .img-thumb-container > ul{
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }
                .thumb{
                    width: 50px;
                    height: 50px;
                    display: inline-block;
                    text-align: center;
                }
                .img-thumb-container{
                    float: left;
                    height: 150px;
                    width: 200px;
                }
            </style>
            <script src="js/jquery.js"></script>
            <script src="js/slider.js"></script>
        </head>
        <body>
            <div class="img-thumb-container">
                <ul>
                    <a href="#"><li><button type="button">&#8593;</button></li></a>
                    <a href="#"><li>
                        <img src="images/s1.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li>
                        <img src="images/s2.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li>
                        <img src="images/s3.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li><button type="button">&#8595;</button></li></a>
                </ul>
            </div>
            <div class="slider">
                <ul>
                    <li><img src="images/s1.jpg"></li>
                    <li><img src="images/s2.jpg"></li>
                    <li><img src="images/s3.jpg"></li>
                </ul>
            </div>
        </body>
        </html>

This is the basic markup I need for what I understand.

Upvotes: 3

Answers (4)

Alex

Reputation: 1192

HTML:

<div id="background-slideshow" class="background-slideshow">
    <img class="current" src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
</div>

CSS:

div.background-slideshow img {
   display: none;
   z-index: 1;
   width: 100%;
   vertical-align: middle;  
}
div.background-slideshow img.current {
    display: inline;  
    z-index: 2;
}
div.background-slideshow img.previous {
    z-index: 1;
}

jQuery:

var animateInterval;
function rotateImagesForward(){

    var oCurrentPhoto = $("#background-slideshow img.current");
    var oNextPhoto = oCurrentPhoto.next();

    if (oNextPhoto.length == 0) {
        oNextPhoto = $("#background-slideshow img:first");      
    }

    oCurrentPhoto.removeClass("current").addClass("previous");

    oNextPhoto.css({opacity:0.0}).addClass("current")
            .animate({opacity:1.0}, 500, function(){  
                oCurrentPhoto.removeClass("previous");
            });
}

animateInterval = setInterval(rotateImagesForward, 4000);

Upvotes: 2

Kiel Labuca

Reputation: 1243

I was also asked the same thing in a Job interview and here is the code that I used to passed the interview:

HTML CODE:

<div id="background-slideshow">
    <img id="home-image" class="slides" src="img/home-image.jpg" />
    <img id="shop-image" class="slides" src="img/shop-image.jpg" />
    <img id="dine-image" class="slides" src="img/dine-image.jpg" />
    <img id="watch-image" class="slides" src="img/watch-image.jpg" />
</div>

CSS CODE:

div#background-slideshow{
    position: relative;
    height: 745px;
    width: 1440px;
    position: absolute;
    top: 0px;
    right: -10px;
}

img.slides{
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0px;
    height: 745px;
}

img#home-image{
    z-index: -666;
}

img#shop-image{
    z-index: -777;
}

img#dine-image{
    z-index: -888;
}

img#watch-image{
    z-index: -999;
}

JQUERY CODE:

var indexer = 0;
var animateInterval;

function animate(){
        if(indexer == 0){
            $("#background-slideshow > #watch-image").fadeOut(2000);
            $("#background-slideshow > #home-image").fadeIn(2000);
        }
        else if(indexer == 1){
            $("#background-slideshow > #home-image").fadeOut(2000);
            $("#background-slideshow > #shop-image").fadeIn(2000);
        }
        else if(indexer == 2){
            $("#background-slideshow > #shop-image").fadeOut(2000);
            $("#background-slideshow > #dine-image").fadeIn(2000);
        }
        else if(indexer == 3){
            $("#background-slideshow > #dine-image").fadeOut(2000);
            $("#background-slideshow > #watch-image").fadeIn(2000);
        }

        if(indexer == 3) indexer = 0;
        else indexer++;
    }

    animateInterval = setInterval(animate, 10000);
    animate();

Give it a try and good luck, I also never learned it from school too.

Upvotes: 10

LOTUSMS

Reputation: 10240

Don't feel bad man. I am a Software Engineer. So far I have 5 years experience as a PHP Developer. 5 years experience as a SEO Engineer, and I am a Senior UI Developer and none of that was taught to me in school either! lol. My best advice to you is: