jQuery Image Slider - Part 2

Joseph Smith · 216K views · 2012 · 9:01

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as the tutorial they followed when asking why their jQuery slider fails or how to extend it, for example by adding prev and next buttons.

Recommended by 0 people across 0 different months, 2013 to 2015.

What it is

A 2012 screencast tutorial by Joseph Smith, part 2 of a series on building a jQuery image slider. It writes the script that fades in the first image and then loops through the rest, designed to work with any number of images.

What people said

Cites aztekgold · 2013-05 · Stack Overflow · on “How do I add prev and next buttons to my jQuery slider?”

I have created a basic jQuery slider following a tutorial from TheHelpingDevelop [this video] . I have changed the slider to be a flexible width and made the images fade instead of slide. I would like to know how to incorporate previous and next buttons in the slider. <!DOCTYPE html> <html> <head> <title>Slider</title> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> .slider{ position: relative; width:80%; height:350px; overflow: hidden; margin: 30px auto; } .slider img{ width: 100%; height: inherit; display: none; } </style> </head> <body onload="slider()"> <div class="slider"> <img id="1" src="img/image1.png" border="0" alt=""> <img id="2" src="img/image2.png"

Cites user3145092 · 2014-01 · Stack Overflow · on “ASP.NET using JQuery error”

Basically I'm creating a slideshow in Jquery, Following this guide > [this video] It asks me to input <body onload="Script();"> into my page, but I can't, due to the fact I'm using a MasterPage for my layout then Content Pages.. I tried adding the code into Masterpage but it complained that I had more than one body, so I removed the original body, leaving just but still didn't work.. When I try entering it into my Content Page, it stats that I can't place the into a ContentPlaceHolder header, so I move to my second ContentPlaceHolder and it still doesn't work.. Please help me resolve this issue, would be greatly appreciated! BIG THANKS TO THOSE THAT SUPPORTED ME!

Cites Spencer Davis · 2015-08 · Stack Overflow · on “Jquery custom photo slideshow displaying all images simultaneously instead of one then the next”

I followed a tutorial on youtube to make a photo ...reel? ( [this video] )and cannot for the life of me figure out why my photos are displaying the same as before I did the code. They are supposed to fade in and out every 3 seconds in a loop. I have 8 photos which shouldn't matter to my knowledge and understanding of the written code. function Slider() { $(".photoSlider#1").show("fade", 300); $(".photoSlider#1").delay(3000).hide("slide", { direction: 'left' }, 300); var sliderCount = $(".slider img").size(); var count = 2; setInterval(function () { $(".photoSlider#" + count).show("slide", { direction: 'right' }, 300); $(".photoSlider#" + count).delay(3000).hide("slide", { direction: 'left' }, 300