jQuery Tutorial #6 - Building a jQuery Image Slider
Why Stack Overflow recommends it
Stack Overflow users link it when someone needs a working jQuery image slider example or wants to understand how a setInterval-based slider is put together.
Recommended by 3 people across 3 different months, 2015 to 2018.
What it is
A beginner-friendly jQuery tutorial from LearnCode.academy that walks through building an auto-playing image slider widget from scratch. It also introduces DOM caching, where DOM lookups are stored in variables for reuse, and links to a jsfiddle with the full source.
What people said
Strong rec hdotluna · 2016-10 · Stack Overflow · on “Making an image slider with jquery”
I think setInterval function is the proper way. There's a youtube tutorial out there. [this video] Watch this so you can understand how the slider works. There's a lot of way but this one is absolutely excellent.
Recommends NewtonIncorporated · 2015-08 · Stack Overflow · on “jQuery Image slider is not working”
This tutorial may help: [this video] $(function() { //settings for slider var width = 720; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; //cache DOM elements var $slider = $('#slider'); var $slideContainer = $('.slides', $slider); var $slides = $('.slide', $slider); var interval; function startSlider() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { if (++currentSlide === $slides.length) { currentSlide = 1; $slideContainer.css('margin-left', 0); } }); }, pause); } function pauseSlider() { clearInterval(interval); } $slideContainer .on('mouseenter', pauseSlider) .on('mouseleave', startSlider); startSlider(
Recommends user2120121 · 2015-11 · Stack Overflow · on “Make a sliding sidebar”
You can use .animate() [LINK] in jQuery, but you seem that you need to watch or follow some examples. I think that this tutorial [this video] is a good start. Also have a look [LINK] on .animate() basic use. Another good guide [LINK] . I hope that helps, good luck.
Cites Petra · 2015-06 · Stack Overflow · on “move images in a line with timed effect”
i have found a very good youtube tutorial including a fiddle. I just changed some of the effects (and image width) to giv it the effect I liked and wanted. Thnx to all who have helped me :) [1] [LINK] $(function() { //settings for slider var width = 720; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; //cache DOM elements var $slider = $('#slider'); var $slideContainer = $('.slides', $slider); var $slides = $('.slide', $slider); var interval; function startSlider() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { if (++currentSlide === $slides.length) { currentSlide = 1; $slideContainer.css('margin-left
Cites choco · 2017-03 · Stack Overflow · on “How to add next previous button to js jQuery slider?”
I have watch a tutorial on youtube on how to create slider using jquery jquery tutorial slider [this video] But no Previous and Next Button How to add Previous and Next Button to Jquery Slider Here is the code: 'use strict'; $(function() { //settings for slider var width = 720; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; //cache DOM elements var $slider = $('#slider'); var $slideContainer = $('.slides', $slider); var $slides = $('.slide', $slider); var interval; function startSlider() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { if (++currentSlide === $slides.length) { currentSlide = 1; $slideContain
Cites Shahrukh Nasir · 2018-02 · Stack Overflow · on “Why jQuery Image Slider does not work?”
I had just watched a youtube tutorial ( [this video] ) about Building a Jquery Image gallery (since I have little knowledge of Jquery), However it does not seem to work by any means. I went through my code thoroughly cross checking it, and fixed all possible errors but it still does'nt work. What is it that I'm doing wrong?? HTML: <div id="slider"> <ul class="slides"> <li class="slide"><img src="images/1.jpg"></li> <li class="slide"><img src="images/2.jpg"></li> <li class="slide"><img src="images/3.jpg"></li> <li class="slide"><img src="images/4.jpg"></li> <li class="slide"><img src="images/5.jpg"></li> <li class="slide"><img src="images/6.jpg"></li> </ul> </div> CSS: #slider { width: 720px; heig