Create A Simple Slideshow

Super Simple Slideshow

Today I would like to discuss with you a really simple way of creating a slideshow. Hopefully by the end of this tutorial you will have some idea of how to implement your own slide show. Feel free to use my code in your projects. If you have any comments or suggestions I would love to hear from you.

What we will use

We will use a combination of Html, CSS and JavaScript; specifically jQuery.

How it will work

The slideshow will slide through the images at a set interval and will also have back and forward buttons.

Most of the magic is in the CSS. So if you’re a CSS pro then this will be a breeze. The jQuery is used to add and remove style elements and to animate between the changes.

The slideshow works by lining the images up horizontally by using the float attribute and viewing them through a window that has the ‘overflow’ property set to ‘hidden’. The jQuery moves the slides back and forth by adjusting the left margin of the div that contains all the images.

Let’s make a slideshow

The first stage is to set up the html as follows:

<div id="slideShow">
    <div id="slideShowWindow">
           <div class="slide">
             <img src=”img1.png”/>
                   <div class="slideText">
                      <h2>The Slide Title</h2>
                         <p>This is the slide text</p>
                   </div><!--</slideText> -->
            </div>  <!-- </slide> repeat as many times as needed -->
     </div><!--</slideShowWindow> -->
 </div><!--</slideshow> -->

Next we will write the CSS, which is as follows:

img {
    display: block;
    width: 100%;
    height: auto;
}
p{
    background:none;
    color:#ffffff;
}
#slideShow #slideShowWindow {
    width: 650px;
    height: 450px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow:hidden;
    margin-left: auto;
    margin-right:auto;
}

#slideShow #slideShowWindow .slide {
        margin: 0;
        padding: 0;
        width: 650px;
        height: 450px;
        float: left;
        position: relative;
        margin-left:auto;
        margin-right: auto;
    }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
.slideText {
    background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
    display: block;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer;
}
#leftNav {
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_minus.png");
    background-repeat: no-repeat;
    z-index: 10;
}
#rightNav {
    right: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_green.png");
    background-repeat: no-repeat;
    z-index: 10;    }

As you can see there isn’t anything exciting or complicated about this CSS. In fact it doesn’t get more basic, but I promise that’s all that’s needed.

Next we will create the jQuery:

$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 650;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;

    //Assign a timer, so it will run periodically
    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>');

    slides.css({ 'float': 'left' });

    //set #slidesHolder width equal to the total width of all the slides
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);

    $('#slideShowWindow')
        .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
        .append('<span class="slideNav" id="rightNav">Move Right</span>');

    manageNav(currentPosition);

    //tell the buttons what to do when clicked
    $('.slideNav').bind('click', function () {

        //determine new position
        currentPosition = ($(this).attr('id') === 'rightNav')
        ? currentPosition + 1 : currentPosition - 1;

        //hide/show controls
        manageNav(currentPosition);
        clearInterval(slideShowInterval);
        slideShowInterval = setInterval(changePosition, speed);
        moveSlide();
    });

    function manageNav(position) {
        //hide left arrow if position is first slide
        if (position === 0) {
            $('#leftNav').hide();
        }
        else {
            $('#leftNav').show();
        }
        //hide right arrow is slide position is last slide
        if (position === numberOfSlides - 1) {
            $('#rightNav').hide();
        }
        else {
            $('#rightNav').show();
        }
    }


    //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
    function changePosition() {
        if (currentPosition === numberOfSlides - 1) {
            currentPosition = 0;
            manageNav(currentPosition);
        } else {

            currentPosition++;
            manageNav(currentPosition);
        }
        moveSlide();
    }


    //moveSlide: this function moves the slide
    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    }

});

I have commented on the jQuery code so that it is easier to understand. And there you have it, a super simple slideshow that could be built by anyone.

If you have any comments then please feel free to contact me.

Read more articles on jQuery:

• Back To School Theme/Animation by JQuery Animation
  
• Easily Create An Analog Clock Using moment.js And JQuery