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;
-
-
- slideShowInterval = setInterval(changePosition, speed);
-
- slides.wrapAll('<div id="slidesHolder"></div>');
-
- slides.css({ 'float': 'left' });
-
-
- $('#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);
-
-
- $('.slideNav').bind('click', function () {
-
-
- currentPosition = ($(this).attr('id') === 'rightNav')
- ? currentPosition + 1 : currentPosition - 1;
-
-
- manageNav(currentPosition);
- clearInterval(slideShowInterval);
- slideShowInterval = setInterval(changePosition, speed);
- moveSlide();
- });
-
- function manageNav(position) {
-
- if (position === 0) {
- $('#leftNav').hide();
- }
- else {
- $('#leftNav').show();
- }
-
- if (position === numberOfSlides - 1) {
- $('#rightNav').hide();
- }
- else {
- $('#rightNav').show();
- }
- }
-
-
-
- function changePosition() {
- if (currentPosition === numberOfSlides - 1) {
- currentPosition = 0;
- manageNav(currentPosition);
- } else {
- currentPosition++;
- manageNav(currentPosition);
- }
- moveSlide();
- }
-
-
-
- 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: