Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

Super Simple Slideshow

Author:   Michael Griffiths

Date created:   28 November 2015

[l]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 do use my code then please show your appreciation by placing a little link (www.griffithswebdesign.com) to my site somewhere in your page with the slideshow. If you have any comments or suggestions I would love to hear from you. [/l] [l][b]What we will use[/b] We will use a combination of Html, CSS and JavaScript; specifically jQuery. [b]How it will work[/b] 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:[/l] [code]

The Slide Title

This is the slide text

[/code] [l][b]Next we will write the CSS, which is as follows: [/b] [/l] [code]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; }[/code] [l] 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: [/l] [code]$(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('
'); slides.css({ 'float': 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); $('#slideShowWindow') .prepend('Move Left') .append('Move Right'); 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) }); } }); [/code] [l]I have commented 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  [/l]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page