Slideshows and carousels can add a lot to your website. They can be used in headers, blog posts, image showcases and more.<\/p>\n
Today, we’ll learn how to create your own slideshow from scratch with Javascript and a little HTML.
\n<\/p>\n
From a pseudocode standpoint, we’ll need to use the following:<\/p>\n
The first item is easy. JavaScript provides a Clearly, we can’t have a slideshow or carousel without text, images, or other media. Let’s display the media in an unordered list as such:<\/p>\n CSS:<\/p>\n Notes: For each successive When we made our buttons in Step 1, we specified that they would call a JS Function Instead of making the user click buttons to change slides, we can have a timer to do it automatically.<\/p>\n That’s it! Add this to the top of the JavaScript in Option 1.<\/p>\n Of course, if you want the slideshow to advance automatically AND have buttons for the user to navigate between slides, you can simply add the code in Option 2 to Option 1, and leave everything else alone.<\/p>\n But what if the user wants to pause?<\/p>\n This is very simple. In the HTML, add the following button between Prev and Next:<\/p>\n In the JavaScript:<\/p>\n We can add buttons to go to the first or last item in the slideshow.<\/p>\n Add these buttons somewhere in the form:<\/p>\n JavaScript:<\/p>\n On some slideshows, there is a text hint, like “Slide 2 of 7” or “Page 4”. We can add this to our slideshow.<\/p>\n In the HTML, where you want to display the text, paste this code. I have placed this right above the navigation buttons.<\/p>\n Now, we need to go into the JS and make some modifications.<\/p>\n On the On <\/p>\n You can see a working demo at http:\/\/g-liu.github.io\/slideshow\/<\/a>. I’ve set the timer to one second per slide to demonstrate better the automatic slide advancing.<\/p>\nsetInterval(event, time)<\/code> function, which can trigger events every X milliseconds. The second item could be an <input type=\"button\" onclick=\"advance()\"... \/><\/code> which changes the item displayed. The third item can be an unordered list, and the fourth will rely on CSS’s display<\/code> property<\/a>.<\/p>\nStep 1: Getting our items together<\/h1>\n
<\/pre>\r\n<ul style="list-style-type: none; margin-left: -2em;">\r\n\t<li id="1" class="hideable" style="display: block;"><!-- YOUR CONTENT HERE --><\/li>\r\n\t<li id="2" class="hideable"><!-- YOUR CONTENT HERE --><\/li>\r\n\t<li id="3" class="hideable"><!-- YOUR CONTENT HERE --><\/li>\r\n<!-- ... and so on --><\/ul>\r\n<pre>\r\n<!-- Buttons to go back and forth between slides. --><\/pre>\r\n<form>\r\n<input type="button" value="Back" \/>\r\n<input type="button" value="Forward" \/>\r\n<\/form>\r\n<pre>\r\n<\/pre>\n
\r\n.hideable {\r\n display: none;\r\n}\r\n<\/pre>\nLI<\/code>, the id increases by 1. On one and only one LI<\/code>, style=\"display: block;\"<\/code> must be added as an attribute. This is the list-item that will show up by default when the user loads the slideshow.<\/i><\/p>\nStep 2: The JavaScript<\/h1>\n[note color=”#FFCC00″]Place all your JavaScript within the head tags<\/code>[\/note]\nNow, we can write the JavaScript that makes the slideshow work. We have three options here: a manual slideshow where users must press buttons to navigate between slides, an automatic slideshow that displays each slide for X milliseconds, or a combination of both (along with a Pause button).<\/p>\n
Option 1: Manual navigation<\/h2>\n
toggleSlide()<\/code> when clicked. Now, let’s make that function.<\/p>\n\r\n\/\/ direction = boolean value: true or false. If true, go to NEXT slide; otherwise go to PREV slide\r\nfunction toggleSlide(direction) {\r\n var elements = document.getElementsByClassName("hideable"); \/\/ gets all the "slides" in our slideshow\r\n\r\n \/\/ Find the LI that's currently displayed\r\n var visibleID = getVisible(elements);\r\n\r\n elements[visibleID].style.display = "none"; \/\/ hide the currently visible LI\r\n if(!direction) {\r\n var makeVisible = prev(visibleID, elements.length); \/\/ get the previous slide\r\n } else {\r\n var makeVisible = next(visibleID, elements.length); \/\/ get the next slide\r\n }\r\n elements[makeVisible].style.display = "block"; \/\/ show the previous or next slide\r\n}\r\n\r\nfunction getVisible(elements) {\r\n var visibleID = -1;\r\n for(var i = 0; i < elements.length; i++) {\r\n if(elements[i].style.display == "block") {\r\n visibleID = i;\r\n }\r\n }\r\n return visibleID;\r\n}\r\n\r\nfunction prev(num, arrayLength) {\r\n if(num == 0) return arrayLength-1;\r\n else return num-1;\r\n}\r\n\r\nfunction next(num, arrayLength) {\r\n if(num == arrayLength-1) return 0;\r\n else return num+1;\r\n}\r\n<\/pre>\nOption 2: Adding a timer for automatic navigation<\/h2>\n
\r\nvar interval = 3500; \/\/ You can change this value to your desired speed. The value is in milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000.\r\nvar switching = setInterval("toggleSlide(true)", interval);\r\n<\/pre>\nOption 3: Combining the two<\/h2>\n
\r\n<input id="pauseButton" type="button" value="Pause" \/>\r\n<\/pre>\n
\r\nwindow.paused = false;\r\n\r\nfunction toggleInterval() {\r\n var button = document.getElementById("pauseButton");\r\n if(!window.paused) {\r\n clearInterval(switching);\r\n button.value = "Resume";\r\n } else {\r\n switching = setInterval("toggleSlide(true)", interval);\r\n button.value = "Pause";\r\n }\r\n window.paused = !(window.paused);\r\n}\r\n<\/pre>\nExtras<\/h1>\n
First and last buttons<\/h2>\n
\r\n<input id="firstButton" type="button" value="First" \/>\r\n<input id="lastButton" type="button" value="Last" \/>\r\n<\/pre>\n
\r\n\/\/ where = boolean. false => go to first item, true => go to last item.\r\nfunction goToEdge(where) {\r\n var elements = document.getElementsByClassName("hideable");\r\n var visibleID = getVisible(elements);\r\n var firstButton = document.getElementById("firstButton");\r\n var lastButton = document.getElementById("lastButton");\r\n\r\n elements[visibleID].style.display = "none"; \/\/hides the currently visible item\r\n if(!where) {\r\n elements[0].style.display = "block"; \/\/shows the first item\r\n } else {\r\n elements[elements.length-1].style.display = "block"; \/\/shows the last item\r\n }\r\n}\r\n<\/pre>\nDisplay current item number<\/h2>\n
\r\nSlide <!-- you can change "Slide" to Page, Item, etc. -->\r\n<span id="slideNumber">\r\n<script type="text\/javascript">\r\nvar elements = document.getElementsByClassName("hideable");\r\nvar vis = getVisible(elements) + 1;\r\ndocument.write(vis);\r\n<\/script>\r\n<\/span>\r\nof <!-- Or use "\/", as in Page 3\/7 -->\r\n<script type="text\/javascript">\r\n\/\/ Write the number of slides to HTML. Dynamically changes as you add or remove slides.\r\ndocument.write(document.getElementsByClassName("hideable").length);\r\n<\/script>\r\n<\/pre>\ntoggleSlide()<\/code> function, add this before the final closing bracket:<\/p>\n\r\nvar sn = document.getElementById("slideNumber");\r\nsn.innerHTML = (makeVisible + 1);\r\n<\/pre>\ngoToEdge()<\/code>, modify the if ... else<\/code> clause as such:<\/p>\n\r\nif(!where) {\r\n elements[0].style.display = "block";\r\n sn.innerHTML = 1;\r\n} else {\r\n elements[elements.length-1].style.display = "block";\r\n sn.innerHTML = elements.length;\r\n}\r\n<\/pre>\nDemo<\/h1>\n