Automatic multiple image slider in html css

1. Automatic multiple image slider in html

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   

First slide label

Second slide label

Third slide label

Fourth slide label

Fifth slide label

Previous Next

Welcome to Lot Poetry Friends,

Do you want to put photo slider in your blogger or website then you have come to the right place, this slider will work in wordpress, blogger, website, copy the below html code, put in header, widget, page, post

Change the URL of the photo. This slider slides automatically, if you want, you can also slide with your finger. If you like this post of ours then do comment and share

How do I make a carousel in HTML CSS?

How to make slider in html and css

This slider will work in WordPress, Blogger,

Automatic multiple image slider in html css

लॉट पोएट्री में आपका स्वागत है,

क्या आप अपने ब्लॉगर या वेबसाइट में फोटो स्लाइडर लगाना चाहते हैं तो आप सही जगह पर आए हैं, यह स्लाइडर वर्डप्रेस, ब्लॉगर, वेबसाइट में काम करेगा, नीचे दिए गए एचटीएमएल कोड को कॉपी करें, हेडर, विजेट, पेज, पोस्ट में डालें

फोटो का यूआरएल बदलें। यह स्लाइडर अपने आप स्लाइड हो जाता है, आप चाहें तो अपनी उंगली से भी स्लाइड कर सकते हैं। अगर आपको हमारी यह पोस्ट अच्छी लगी हो तो कमेंट और शेयर जरूर करें 

ब्लॉगर या वेबसाइट में फोटो स्लाइडर लगाएं 

Header | Sidebar | Page | Post 

<!--Required meta tags--> <!--Bootstrap CSS--> <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet" /> <!--Optional JavaScript--> <!--jQuery first, then Popper.js, then Bootstrap JS--> <script crossorigin="anonymous" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script> <script crossorigin="anonymous" integrity="sha384- 9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> </script> <script crossorigin="anonymous" integrity="sha384- B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> <div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carouselExampleCaptions"> <br /></li> <li data-slide-to="1" data-target="#carouselExampleCaptions"> <br /></li> <li data-slide-to="2" data-target="#carouselExampleCaptions"> <br /></li> <li data-slide-to="3" data-target="#carouselExampleCaptions"> <br /></li> <li data-slide-to="4" data-target="#carouselExampleCaptions"> <br /></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img alt="LOT POETRY" class="d-block w-100" src="https://bit.ly/3DlpUq5" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> </div> </div> <div class="carousel-item"> <img alt="LOT POETRY" class="d-block w-100" src="https://bit.ly/35j3yt1" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> </div> </div> <div class="carousel-item"> <img alt="LOT POETRY" class="d-block w-100" src="https://bit.ly/3iK3vcM" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> </div> </div> <div class="carousel-item"> <img alt="LOT POETRY" class="d-block w-100" src="https://bit.ly/3iHnxo7" /> <div class="carousel-caption d-none d-md-block"> <h5>Fourth slide label</h5> </div> </div> <div class="carousel-item"> <img alt="LOT POETRY" class="d-block w-100" src="https://bit.ly/36W9MPG" /> <div class="carousel-caption d-none d-md-block"> <h5>Fifth slide label</h5> </div> </div> </div> <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-prev-icon"> </span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sronly"></span> </a> </div>  

2.Multiple image slider in html css

Wordpress | Blogger  | Carousel slider

क्या आप अपने ब्लॉगर या वेबसाइट में फोटो स्लाइडर लगाना चाहते हैं तो आप सही जगह पर आए हैं, यह स्लाइडर वर्डप्रेस, ब्लॉगर, वेबसाइट में काम करेगा, नीचे दिए गए एचटीएमएल कोड को कॉपी करें, हेडर, विजेट, पेज, पोस्ट में डालें

फोटो लिंक बदलें। यह स्लाइडर दाएं से बाएं घूमता है, अगर आपको पोस्ट पसंद आए तो कमेंट और शेयर करें

How to install photo slider in blogger  

Header | Widget | Sidebar | Page | Post 

<body contenteditable="false"><div _ngcontent-c0="" fxlayout="row" style="box-sizing: border-box; display: flex; flex-direction: row; margin-bottom: 30px; overflow-x: scroll; padding-bottom: 20px; padding-top: 20px;"><img _ngcontent-c0="" alt="Screenshot 1" class="screenshot-small ng-star-inserted" src="https://bit.ly/3DlpfF7" width="174" height="320"><img _ngcontent-c0="" alt="Screenshot 2" class="screenshot-small ng-star-inserted" src="https://bit.ly/3JPvVOi" width="174" height="320"><img _ngcontent-c0="" alt="Screenshot 3" class="screenshot-small ng-star-inserted" src="https://bit.ly/3r504lF" width="174" height="320"><img _ngcontent-c0="" alt="Screenshot 4" class="screenshot-small ng-star-inserted" src="https://bit.ly/35j4D3T" width="174" height="320"><img _ngcontent-c0="" alt="Screenshot 5" class="screenshot-small ng-star-inserted" src="https://bit.ly/36tYmmJ" width="174" height="320"><img _ngcontent-c0="" alt="Screenshot 6" class="screenshot-small ng-star-inserted" src="https://bit.ly/3uyn6SE" width="174" height="320"><img _ngcontent-c0="" alt="" <="" div=""></div></body>