Javascript

jQuery Cycle: A Simple Slideshow

️ jQuery Cycle: A Simple Slideshow (No Plugin Needed)

✅ Features:

  • Automatic cycling through images

  • Fade transition

  • Looping slideshow

HTML Structure

html
<div id="slideshow">
<img src="slide1.jpg" class="slide" alt="Slide 1" />
<img src="slide2.jpg" class="slide" alt="Slide 2" />
<img src="slide3.jpg" class="slide" alt="Slide 3" />
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSS Styling

html
<style>
#slideshow {
position: relative;
width: 600px; /* adjust to your image size */
height: 400px;
margin: auto;
overflow: hidden;
}

.slide {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: none;
object-fit: cover;
border-radius: 6px;
}

.slide:first-child {
display: block; /* Show the first slide initially */
}
</style>

⚙️ jQuery Script

js
$(document).ready(function () {
let current = 0;
const slides = $('.slide');
const total = slides.length;

function showNextSlide() {
slides.eq(current).fadeOut(1000);
current = (current + 1) % total;
slides.eq(current).fadeIn(1000);
}

setInterval(showNextSlide, 3000); // change every 3 seconds
});

How It Works:

  • All .slide images are stacked with position: absolute.

  • Only one is shown at a time.

  • Every 3 seconds, the current slide fades out and the next fades in.

  • When it reaches the last slide, it loops back to the start.

Want More?

You can enhance this basic slideshow with:

  • Next/Prev buttons

  • Pause on hover

  • Progress bar

  • Captions per slide

✅ Summary

Feature Method
Show/Hide .fadeIn() / .fadeOut()
Timing setInterval()
Looping % (modulo operator) to cycle back to start

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *