Tutorial
How to Add an Automatic Multiple Image Slider in HTML & CSS
Works perfectly on Blogger, WordPress, and Custom Websites!
Option #1
Automatic Bootstrap Carousel Slider
An elegant, automated sliding show featuring smooth fade/slide transitions and navigation arrows.
Live Preview
How to customize your images:
Look for the src="your-image-url-here" tags in the code block below and replace them with your own uploaded image links.
फोटो बदलने के लिए नीचे दिए गए कोड में src="..." के अंदर अपनी इमेज का लिंक डालें।
HTML / BOOTSTRAP CAROUSEL CODE
<!-- Bootstrap 4.5 Dependencies -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Carousel Structure -->
<div class="carousel slide" data-ride="carousel" data-interval="3000" id="mainImageCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#mainImageCarousel"></li>
<li data-slide-to="1" data-target="#mainImageCarousel"></li>
<li data-slide-to="2" data-target="#mainImageCarousel"></li>
<li data-slide-to="3" data-target="#mainImageCarousel"></li>
<li data-slide-to="4" data-target="#mainImageCarousel"></li>
</ol>
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<img class="d-block w-100" style="height:400px; object-fit:cover;" src="https://bit.ly/3DlpUq5" alt="First Slide" />
<div class="carousel-caption d-none d-md-block">
<h5>First Slide Label</h5>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img class="d-block w-100" style="height:400px; object-fit:cover;" src="https://bit.ly/35j3yt1" alt="Second Slide" />
<div class="carousel-caption d-none d-md-block">
<h5>Second Slide Label</h5>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<img class="d-block w-100" style="height:400px; object-fit:cover;" src="https://bit.ly/3iK3vcM" alt="Third Slide" />
<div class="carousel-caption d-none d-md-block">
<h5>Third Slide Label</h5>
</div>
</div>
<!-- Slide 4 -->
<div class="carousel-item">
<img class="d-block w-100" style="height:400px; object-fit:cover;" src="https://bit.ly/3iHnxo7" alt="Fourth Slide" />
<div class="carousel-caption d-none d-md-block">
<h5>Fourth Slide Label</h5>
</div>
</div>
<!-- Slide 5 -->
<div class="carousel-item">
<img class="d-block w-100" style="height:400px; object-fit:cover;" src="https://bit.ly/36W9MPG" alt="Fifth Slide" />
<div class="carousel-caption d-none d-md-block">
<h5>Fifth Slide Label</h5>
</div>
</div>
</div>
<!-- Navigation Arrows -->
<a class="carousel-control-prev" data-slide="prev" href="#mainImageCarousel" role="button">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#mainImageCarousel" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Option #2
Multi-Image Scroll Slide Viewer
Perfect for showcasing app screenshots, product features, or image galleries in a sleek side-scrolling format.
Live Preview
Smooth scrolling feature:
This layout flows smoothly from left-to-right. On mobile devices, users can easily slide with their fingers.
यह स्लाइडर बाएं से दाएं स्मूथली स्क्रॉल करता है। मोबाइल यूजर इसे आराम से उंगली से स्वाइप कर सकते हैं।
HTML / CSS FLEX MULTI-SLIDER CODE
<!-- Flex Horizontal Gallery Viewer -->
<div style="display: flex; flex-direction: row; overflow-x: auto; gap: 16px; padding: 15px 5px; scroll-behavior: smooth;">
<img src="https://bit.ly/3DlpfF7" alt="Screenshot 1" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
<img src="https://bit.ly/3JPvVOi" alt="Screenshot 2" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
<img src="https://bit.ly/3r504lF" alt="Screenshot 3" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
<img src="https://bit.ly/35j4D3T" alt="Screenshot 4" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
<img src="https://bit.ly/36tYmmJ" alt="Screenshot 5" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
<img src="https://bit.ly/3uyn6SE" alt="Screenshot 6" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 174px; height: 320px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
</div>
