February 21, 2015

Simple Image Slider

Simple Image Slider

Slideshows, image sliders, magic picture changing boxes: whatever you call them, the pattern is used all over the internet, so much so that nearly every website has one. If you’re a web developer, the time will come when you may have to build one on your own. With that in mind, let’s look at how we can build a simple image slider using HTML, CSS, and jQuery.

We’ll start off by creating a container element, which has the id container. Inside the container there is a id slider. Inside of that lie our images. There are also two button elements next and previous, which are used to manually cycle through slides at the users request. This slider also contains the pager

HTML

<div id="container">
    <div id="pager"></div>
    <div id="next">›</div>
    <div id="prev">‹</div>
    <div id="slider">
        <img src="img/slide1.jpg">
        <img src="img/slide2.jpg">
        <img src="img/slide3.jpg">
    </div>
</div>

The CSS contains the width and the height of the container, along with the next and previous button styler and the pager styler.

CSS

#container {
    width: 960px;
    height: 500px;
    position: relative;
    margin: 50px auto;
}
#slider {
    width: 960px;
    height: 500px;
    position: absolute;
    overflow: hidden;
}
#next {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 225px;
    right: 0;
    line-height: 50px;
    /*font-size: 30px;*/
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    opacity: 0;
}
#prev {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 225px;
    left: 0;
    line-height: 50px;
    /*font-size: 30px;*/
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    opacity: 0;
}
#container:hover #next {
    opacity: 1;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
}
#container:hover #prev {
    opacity: 1;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
}
#pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    cursor: pointer;
    z-index: 999;
    bottom:0;
}
#pager a {
    font-size: 0px;
    color: transparent;
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    border-radius: 20px;
    background: transparent;
    margin: 10px;
}           
#pager a.activeSlide {
    background: #000
}    

jQuery

$('#slider').cycle({
    fz:         'scrollHorz',
    next:       '#next',
    prev:       '#prev',
    pager:      '#pager', 
    timeout:    3000,
    pause:      1
});

Attachments:

I have used external attachments.

https://github.com/vivinantony/SimpleImageSlider/blob/master/js/jquery-2.1.1.min.js
https://github.com/vivinantony/SimpleImageSlider/blob/master/js/jquery.cycle.all.js
demo

No comments:

Post a Comment

Popular Posts

Views