An easy and basic jQuery slider. Just place your images in a
<ul> with the class
.imgList and give any
<li> image the
.activeImg class. The
.imgSlider class is optional and is just a wrapper setting some basic styles like width, padding, margin etc. slideBasic has a 3 second auto slide interval for the images. The auto slide of the images is stopped when a user clicks next, prev, or on the image.
<div class="imgSlider"> <ul class="imgList"> <li><img src="images/coffe1.jpeg" class="activeImg" alt="coffee image"></li> <li><img src="images/coffee2.jpg" alt="coffee image"></li> <li><img src="images/coffee3.jpg" alt="coffee image"></li> </ul> <span class="prev"> ⟨ </span> <span class="next"> ⟩ </span> </div>
<span> for the previous and next arrows is optional, the slider will work without them allowing users to click on the image to change image.