Image Slider Using HTML And CSS Only | Image स्लाइडर केवल HTML और CSS का उपयोग करके

JavaScript based sliders are very heavy. JavaScript based sliders make the webpage slower and also don’t work if user has disabled JavaScript interpretation in browser. So in that condition we need to make slider without javascript. This blog very helpful for you because we are designing slider using HTML and CSS. In this slider we are using animations for making slider. I hope this blog help you for making slider without javascript.

जावास्क्रिप्ट आधारित स्लाइडर बहुत भारी हैं। जावास्क्रिप्ट आधारित स्लाइडर वेबपेज को धीमा बनाते हैं और यह भी काम नहीं करते हैं यदि उपयोगकर्ता ने ब्राउज़र में जावास्क्रिप्ट व्याख्या को अक्षम कर दिया है। तो उस स्थिति में हमें जावास्क्रिप्ट के बिना स्लाइडर बनाने की जरूरत है। यह ब्लॉग आपके लिए बहुत उपयोगी है क्योंकि हम HTML और CSS का उपयोग करके स्लाइडर डिजाइन कर रहे हैं। इस स्लाइडर में हम स्लाइडर बनाने के लिए एनिमेशन का उपयोग कर रहे हैं। मुझे उम्मीद है कि यह ब्लॉग बिना जावास्क्रिप्ट के स्लाइडर बनाने में आपकी मदद करेगा।

Image-Slider-Using-HTML-And-CSS-Only-Image

Features of automatic image slider in HTML CSS without JavaScript/ जावास्क्रिप्ट के बिना HTML CSS में automatic image स्लाइडर के Features

1. JavaScript based sliders make the webpage slower and also don’t work if user has disabled JavaScript interpretation in browser./ जावास्क्रिप्ट आधारित स्लाइडर वेबपेज को धीमा बनाते हैं और यह भी काम नहीं करते हैं यदि उपयोगकर्ता ने ब्राउज़र में जावास्क्रिप्ट व्याख्या को अक्षम कर दिया है।

2. Slider slide horizontally automatically.

3. When user hover on slider then they stop sliding.

4. Slider slide using animation css properties.

5. Add Unlimited images.

6. Provide images size according user requirements.

Automatic image slider using HTML and CSS code/ HTML और CSS कोड का उपयोग करके स्वचालित छवि स्लाइडर

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
align-items: center;
justify-content: center;
}
h2{
margin-top:100px;
text-align: center;
margin-bottom: 30px;
font-size: 50px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7));
}
}
.slider-main-div {
height: 150px;
margin: auto;
overflow: hidden;
position: relative;
width: auto;
}
/*on hover slider stop sliding*/
.slider-main-div .slide-track:hover {
animation-play-state: paused;
}
.slider-main-div .slide-track {
animation: scroll 40s linear infinite;
display: flex;
width: calc(250px * 14);
}

</style>
</head>
<body>
<h2>Slider Using HTML and CSS</h2>
<div class="slider-main-div">
<div class="slide-track">
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2012/12/27/19/40/chain-link-72864_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2015/09/19/20/54/chains-947713_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2014/08/26/21/35/the-fence-428562_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2020/02/03/13/13/connection-4815645_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2017/09/01/02/35/gold-2702903_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2018/11/23/20/12/fence-3834515_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2014/09/21/01/39/fence-454558_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2017/01/11/17/14/chain-1972350_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2022/01/25/09/48/chains-6965744_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2018/09/12/18/19/chain-3672874_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2016/03/22/13/26/background-1272873_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2019/06/12/19/41/fence-4270080_960_720.jpg" height="150" width="300" alt="" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2019/04/25/22/55/fence-4156231_960_720.jpg" height="150" width="300" alt="" />
</div>
</div>
</div>
</body>
</html>