Light SlideShow

Light Slider. It only uses HTML, CSS and JQuery, It can easily adapt to our site


The are many Sliders trough Internet.

They usually have a wonderful look&feel with many effects, however, they are difficult to adapt to our site’s look and, at the same time, they have a heavy code.

Here we have a simple Slider very easy to adapt to our website’s look, and it has a light code.

It only uses jQuery, CSS and HTML, no other script needs to be included.

First, in thesection of our HTML document, we need to include the jQuery code:

<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Let’s take a look at the simple HTML code:

<div id="slider">
        <section class="slides-container">
            <article id="slide-1" class="slide">
                <div class="numbertext"><h3>1 / 4</h3></div>
                <img src="images/image1.jpg">
                <div class="text"><h3>Caption One</h3></div>
            </article>

            <article id="slide-2" class="slide">
                <div class="numbertext"><h3>2 / 4</h3></div>
                <img src="images/image2.jpg">
                <div class="text"><h3>Caption Two</h3></div>
            </article>

            <article id="slide-3" class="slide">
                <div class="numbertext"><h3>3 / 4</h3></div>
                <img src="images/image3.jpg">
                <div class="text"><h3>Caption Three</h3></div>
            </article>

            <article id="slide-4" class="slide">
                <div class="numbertext"><h3>4 / 4</h3></div>
                <img src="images/image4.jpg">
                <div class="text"><h3>Caption Four</h3></div>
            </article>

            <a class="prev">&#10094;</a>
            <a class="next">&#10095;</a>
        </section>
        <footer>
           <span id="dot-1" class="dot"></span>
           <span id="dot-2" class="dot"></span>
           <span id="dot-3" class="dot"></span>
           <span id="dot-4" class="dot"></span>
        </footer>
    </div>

The slider is inside a div with two main sections: a section with the articles of each page, and a footer with the controls that lead directly to a specific page.

Next would be the jQuery code for change effects between pages.

This would be the initialization:

// start slider
var sliderLen = 4;
var sliderIndex = 1;
var sliderTimer = 3; // seconds
var animationTime = 1000; // milliseconds
$(function(){
    $(".slide").css("display", "none");
    $( ".dot" ).removeClass( "active" );
    $("#slide-1").css("display", "block");
    $("#dot-1").addClass("active");
});

Then, how to give functionality to the controls:

var dotHandler = function (){
    clearInterval( animationSlider );
    i = $(this).attr('id').split('-')[1];
    if ( i < sliderIndex ){
        sliderPrevious ( i );
    } else if ( i > sliderIndex ) {
        sliderNext ( i );
    }
}
var prevHandler = function (){
    clearInterval( animationSlider );
    sliderPrevious(sliderIndex - 1);
}
var nextHandler = function (){
    clearInterval( animationSlider );
    sliderNext(sliderIndex + 1);    
}
$(".dot").on("click", dotHandler);
$(".prev").on("click", prevHandler);
$(".next").on("click", nextHandler);

The animation will stop after clicking on any button. The script assumes that the user prefers to navigate through slide show by himself.

By default, the animation lasts one second; it emulates a right click.

animationSlider = setInterval(function() {
        sliderNext(sliderIndex + 1);
    }, sliderTimer * 1000);

and finally we have the functions for the sliding effects:

function sliderNext( n ){
    if (n > sliderLen){
        n = 1;
    }
    $( ".dot" ).removeClass( "active" );
    $("#dot-" + n).addClass("active");
    $(".dot, .prev, .next").unbind("click");
    $( "#slide-" + sliderIndex ).hide("slide", { direction: "left" }, animationTime);
    $( "#slide-" + n ).show("slide", { direction: "right" }, animationTime, function () { 
        sliderIndex = n; 
        $(".dot").bind("click", dotHandler);
        $(".prev").on("click", prevHandler);
        $(".next").on("click", nextHandler);
    });
}
function sliderPrevious( n ) {
    if (n < 1){
        n = sliderLen;
    }
    $( ".dot" ).removeClass( "active" );
    $("#dot-" + n).addClass("active");
    $(".dot, .prev, .next").unbind("click");
    $( "#slide-" + sliderIndex ).hide("slide", { direction: "right" }, animationTime);
    $( "#slide-" + n ).show("slide", { direction: "left" }, animationTime, function () { 
        sliderIndex = n; 
        $(".dot").bind("click", dotHandler);
        $(".prev").on("click", prevHandler);
        $(".next").on("click", nextHandler);
    });
}

The jQuery methods hide() and show() are the ones that implement the effects. In order to prevent unwanted clicks we should disable the buttons before the sliding starts.

The CSS is pretty simple. All pages of the slider are in the same position by absolute layout, only one is visible each time. Because position absolute is used we need that its container has a definite height. If the height is known, we can use CSS:

.slides-container {
  width: 1000px;
  height: 350px;
  position: relative;
  overflow: hidden;
  margin: auto;
}

If it is unknown, we will have to use a jQuery initialization function:

$(".slides-container").css("height", $(".slide").height());
$( window ).resize(function() {
    $(".slides-container").css("height", $(".slide").height());
});

The final section of the CSS code of the slider:

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    width: 100%;
    display: none;
}

#slider footer {
    padding-top: 20px;
    text-align: center;
}

and the other components:

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  /* four digit is transparent */
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  /*font-size: 15px;*/
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  /*font-size: 12px;*/
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.active, .dot:hover {
  background-color: #717171;
}