How we can create a repeating slideshow using JavaScript and CSS? Solution: JavaScript Loop Slideshow With CSS, Image Slideshow Program using HTML, CSS, and JavaScript.
A slideshow is a presentation of multiples images as a video sequence. Previously I have shared Image Slider, but this is a slide show but there have controls for play/pause and next/previous. You can say this a kind of slider but actually its a slideshow only.
Today you will learn to create an Image slideshow program with controls. You can use this program on your website as an image presentation section. You can start and stop the autoplay of images and there are two buttons for change images. There are only 4 images in the slideshow, you can add more as your requirement.
So, Today I am sharing JavaScript Loop Slideshow With CSS. This is loop slideshow because, where images are no left then its show from the first image again. Basically, this program is based on jQuery but I am putting this in JavaScript section because jQuery is a JS library. This is a complete program you just have to add images.
If you are thinking now how this image slideshow actually is, then see the preview given below.
Preview of Image Slideshow Program
See this video preview to getting an idea of how the program looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Before and After Image Slider
- Text Color Contrast Generator
- CSS 3D Cube Carousel
- Find and Highlight Text Using JS
JavaScript Loop Slideshow With CSS Source Code
Before sharing source code, let’s talk about it. As you know I have used HTML, CSS, and jQuery for creating this image slideshow. There is only 3 controls but lots of conditions. Like by default its play automatically, when you click on next or pre buttons the autoplay will be off. After that, you have to replay it’s for auto slides.
Using HTML I have placed images and buttons, for the button’s icons I have used a Google Font. Now in CSS file, I gave style to all the elements and placed elements on right places. Live there is hover effect, shadow effect and there also has a responsive design for different kinds of screen sizes. I have used CSS @media (info) query for creating a responsive design.
Now using JS/jQuery I have created all functions and conditions. Like its toggle feature, there is one button for play and pause but with toggle feature its changes according to action, also you can click on the whole image to play and pause. There are lots of conditions, you will understand easily after getting the codes if you have knowledge of JavaScript.
I can’t explain all in writing, take the codes and understand it by yourself if you face any trouble then you can ask me. For creating this program you have to create 3 files. First for HTML, second fro CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Loop Slideshow | Webdevtrick.com</title> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slideshow"> <img src="https://webdevtrick.com/wp-content/uploads/text-color-contrast-generator.jpg"> <img src="https://webdevtrick.com/wp-content/uploads/css-outline-styles.jpg"> <img src="https://webdevtrick.com/wp-content/uploads/css-3d-cube-carousel.jpg"> <img src="https://webdevtrick.com/wp-content/uploads/css-breadcrumb-ui-design.jpg"> <span class="toggle material-icons">pause</span> <span class="dailog">Click To Play</span> <div class="icons"> <span class="back material-icons">fast_rewind</span> <span class="next material-icons">fast_forward</span> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ body { margin: 0; overflow-x: hidden; background-color: #e8eaed; font-family: 'Montserrat', sans-serif; } .slideshow { width: 960px; height: 540px; background-color: lightgrey; margin: 0 auto; margin-top: 10%; overflow: hidden; position: relative; border-radius: 25px; transition: all 0.5s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 30; } .slideshow:hover .icons { transform: translateX(0); } .slideshow:hover .toggle.paused { bottom: 0; left: 0; border-radius: 0 25px; transform: none; font-size: 40px; color: white; background: rgba(0,0,0,0.5); } .slideshow:hover .dailog { opacity: 0; transform: translateY(-100%); transition: all 0.5s ease 0.5s; } .toggle:hover:active, .toggle.paused:hover:active { transition: all 0s ease; transform: scale(0.85,0.85); background: rgba(0,0,0,0.6); box-shadow: 0 0 0 5px rgba(255,255,255,0.25); } .dailog { position: absolute; top: 0; z-index: 25; color: white; font-size: 22px; color: white; right: 0; left: 0; text-align: center; height: 100px; line-height: 50px; background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); transition: all 0.5s ease 1s; display: none; transform: translateY(0); } .dailog.show { display: block; } .caption { position: absolute; bottom: 0; z-index: 25; color: white; font-size: 20px; color: white; display: block; text-align: center; height: 35px; line-height: 35px; background: rgba(0,0,0,0.5); transition: all 0.5s ease 1s; transform: translateY(0); left: 50%; transform: translateX(-50%); padding: 0 10px; border-radius: 6px 6px 0 0; } .icons { background: linear-gradient(to bottom right, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75)); position: absolute; z-index: 25; bottom: 0; right: 0; padding: 35px 10px 0 55px; border-radius: 100% 0 25px 0; transition: all 0.25s ease; transform: translate(100%, 100%); } .icons .material-icons { padding: 3px 0; margin: 0; cursor: pointer; transition: all 0.25s ease; color: white; font-size: 30px; } .icons:hover .material-icons { font-size: 40px; padding: 5px 0; } .icons .material-icons:active { transition: all 0s ease; transform: scale(1.25, 1.25); } .toggle { z-index: 25; position: absolute; bottom: 0; font-size: 30px; left: 0; background: rgba(0,0,0,0.4); border-radius: 0 25px; color: white; padding: 3px; transition: all 0.25s ease; cursor: pointer; -webkit-backdrop-filter: blur(5px); } .toggle:hover { font-size: 40px; background: rgba(0,0,0,0.5); padding: 5px; } .toggle.paused { font-size: 40px; padding: 5px; transform: translate(-50%, 50%); left: 50%; bottom: 50%; border-radius: 50%; font-size: 50px; background: rgba(0,0,0,0.7); } img { width: 960px; height: 540px; position: absolute; background-color: white; border-radius: 0 0 25px 25px; transition: all 0.5s ease; } img.hide { transition: transform 1s ease, opacity 0.5s ease 0.5s; opacity: 0; transform: scale(2, 2) translateY(-80%); } img:first-child { z-index: 4; } img:nth-child(2) { z-index: 3; } img:nth-child(3) { z-index: 2; } img:last-child { z-index: 1; } @media screen and (max-width: 1000px) { img { width: 800px; height: 450px; } .slideshow { width: 800px; height: 450px; } } @media screen and (max-width: 825px) { img { width: 640px; height: 360px; } .slideshow { width: 640px; height: 360px; } } @media screen and (max-width: 665px) { img { width: 480px; height: 270px; } .slideshow { width: 480px; height: 270px; } } @media screen and (max-width: 485px) { img { width: 320px; height: 180px; } .slideshow { width: 320px; height: 180px; } } @keyframes shake { 0% { } 25% {transform: rotate(15deg)} 50% {transform: rotate(-15deg)} 75% {transform: rotate(15deg)} 100% {transform: rotate(0deg)} } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
// Code By Webdevtrick ( https://webdevtrick.com ) var img = document.getElementsByTagName('IMG'); var slideShow = function() { if (!img[0].classList.contains('hide')) { img[0].classList.add('hide'); } else if (!img[1].classList.contains('hide')) { img[1].classList.add('hide'); } else if (!img[2].classList.contains('hide')) { img[2].classList.add('hide'); } else { img[0].classList.remove('hide'); img[1].classList.remove('hide'); img[2].classList.remove('hide'); } }; var reverse = function() { if (img[2].classList.contains('hide')) { img[2].classList.remove('hide'); } else if (img[1].classList.contains('hide')) { img[1].classList.remove('hide'); } else if (img[0].classList.contains('hide')) { img[0].classList.remove('hide'); } else { img[2].classList.add('hide'); img[1].classList.add('hide'); img[0].classList.add('hide'); } } var start = setInterval(slideShow, 3000); var toggled = true; function toggle(bool) { if (toggled | bool) { clearInterval(start); toggled = false; $('.toggle').html('play_arrow'); $('.toggle').addClass('paused'); $('.dailog').addClass('show'); } else { start = setInterval(slideShow, 3000); toggled = true; $('.toggle').html('pause'); $('.toggle').removeClass('paused'); $('.dailog').removeClass('show'); } } var transition = false; $('.slideshow').click(function(e) { if ($(e.target).is('.toggle')) { toggle(); } else if ($(e.target).is('.next')) { toggle(true); if (transition == false) { transition = true; setTimeout(function() { slideShow(); transition = false; }, 250); } } else if ($(e.target).is('.back')) { toggle(true); if (transition == false) { transition = true; setTimeout(function() { reverse(); transition = false; }, 250); } } else { toggle(); } }); function launchIntoFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } } function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } var fullscreen = false; $('.slideshow').dblclick(function(e) { if (!$(e.target).is('.material-icons')) { fullscreen ? exitFullscreen() : launchIntoFullscreen(document.documentElement); fullscreen ? fullscreen = false : fullscreen = true; } }); |
That’s It. Now you have successfully created JavaScript Loop Slideshow With CSS, Image Slideshow Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Bhut hi achhi post hai java script loop ka idea bhut achha h
Wow nice post shaan bro
thanks
thanks for the examples. I am gaining confidence after practicing your codes.