How to make autoplay carousel | autoplay carousel using html,css,js







How to make autoplay carousel | autoplay carousel using html,css,js

How to make autoplay carousel | autoplay carousel using html,css,js.

How to make autoplay carousel | autoplay carousel using html,css,js

Hello guys Welcome to codewithrandom today I am showing how to make Autoplay Carousel using HTML,CSS AND JS.
Here in autoplay carousel which uses smooth looking  over animation.Its like a slideshow or  we can call it as Image slider. It is a slideshow which contain the collection of banner/image.The carousel is used to make our website responsive and attractive.
In this code we are taking 4 images which can be controled by button.
So let start…….

CODE:-

For the Code we are using HTML, CSS, JS to develop our Autoplay Carousel.

HTML:-

In html we add basic code like width and height on slider which have min-length and max-length , size and also have placeholder which is 300px. It added 4 images will be slideshow.
 <h2>CSS Autoplay Carousel</h2>  
<div id="sliderSettings">
<label for="slider-width">Slider width in px:</label>
<input type="text" id="slider-width" name="slider-width" minlength="2" maxlength="4" size="6" placeholder="300">
<label for="slider-height">Slider height in px:</label>
<input type="text" id="slider-height" name="slider-height" minlength="2" maxlength="4" size="6" placeholder="300">
</div>
<div id="pSlider">
<ol id="slider-container" dir="ltr">
<li id="slide_1" class="li_slide">
<div class="slide-snapper"></div>
<a class="prev_slide" href="#slide_4"></a> <a class="next_slide" href="#slide_2"></a> </li>
<li id="slide_2" class="li_slide">
<div class="slide-snapper"></div>
<a class="prev_slide" href="#slide_1"></a> <a class="next_slide" href="#slide_3"></a> </li>
<li id="slide_3" class="li_slide"> It have 4
<div class="slide-snapper"></div>
<a class="prev_slide" href="#slide_2"></a> <a class="next_slide" href="#slide_4"></a> </li>
<li id="slide_4" class="li_slide">
<div class="slide-snapper"></div>
<a class="prev_slide" href="#slide_3"></a> <a class="next_slide" href="#slide_1"></a> </li>
</ol>
</div>

HTML OUTPUT:-

How to make autoplay carousel | autoplay carousel using html,css,js

CSS CODE:-

In css we want to add url of images for each slide which we have mentioned in HTML . But their is one things we can’t manipulate i.e height and width of image.
To start with we are adding 4 slide with image and in this background size is cover and background position is centre.
*, *:after, *:before {  
box-sizing: border-box;
}
/* Example images */
#slide_1 {
background-image: url(https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60);
}
#slide_2 {
background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60);
}
#slide_3 {
background-image: url(https://images.unsplash.com/photo-1600716051809-e997e11a5d52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60);
}
#slide_4 {
background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHNhbXBsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60);
}
.li_slide {
background-size: cover;
background-position: center;
}
Next Step is to add Animation in slide and in this we want to use keyframe animation. Keyframe is location on  timeline which mark the begining or end of timeline.we are adding keyframe tonext,snap,and tostart.
/* Animations */  
@keyframes tonext {
75% {
margin-left: 0;
}
95% {
margin-left: calc(100% + 150px);
}
98% {
margin-left: calc(100% + 150px);
}
99% {
margin-left: 0;
}
}
@keyframes snap {
96% {
scroll-snap-align: start;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: start;
}
}
@keyframes tostart {
75% {
margin-left: 0;
}
95% {
margin-left: calc(-300% - 450px);
}
98% {
margin-left: calc(-300% - 450px);
}
99% {
margin-left: 0;
}
}
STEP 3:- In this we want to add RESET value in this we want to style the HTML elements.Here we want to style pslider which we added in html.
/* Reset */  
ol, li {
list-style: none;
margin: 0;
padding: 0;
}
#pSlider {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
/* Left, Right Navigation Arrows */
}
#pSlider #slider-container {
display: flex;
height: 100%;
width: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
#pSlider #slider-container .li_slide {
position: relative;
width: 100%;
border-radius: 10px;
background-color: khaki;
flex: none;
margin-right: 150px;
}
#pSlider #slider-container .li_slide:nth-child(even) {
background-color: mediumaquamarine;
}
#pSlider #slider-container .li_slide:last-child {
margin-right: 0;
}
#pSlider #slider-container .li_slide .slide-snapper {
/* Auto play */
scroll-snap-align: start;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: tonext 4s infinite ease, snap 4s infinite ease;
}
@media (prefers-reduced-motion: reduce) {
#pSlider #slider-container .li_slide .slide-snapper {
animation-name: none;
}
}
#pSlider #slider-container .li_slide:last-child .slide-snapper {
animation-name: tostart, snap;
}
#pSlider #slider-container:hover .li_slide .slide-snapper, #pSlider #slider-container:focus-within .li_slide .slide-snapper {
animation-name: none;
}
#pSlider:before, #pSlider:after, #pSlider .prev_slide, #pSlider .next_slide {
display: inline-block;
position: absolute;
top: 0;
width: 30px;
height: 100%;
z-index: 2;
cursor: pointer;
}
#pSlider:before, #pSlider:after {
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
#pSlider .next_slide {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 20px;
}
#pSlider .prev_slide {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 20px;
}
#pSlider:before, #pSlider .prev_slide {
content: "";
left: 0px;
}
#pSlider:after, #pSlider .next_slide {
content: "";
right: 0px;
}
#pSlider:after {
z-index: 1;
/* set underneath .next_slide (z: 2)*/
background-image: url("data:image/svg+xml,%3Csvg width='40' height='60' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolyline points='10 10 30 30 10 50' stroke='rgba(255,255,255,0.9)' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'%3E&lt;%3C/polyline%3E%3C/svg%3E");
}
#pSlider:before {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='60' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolyline points='30 10 10 30 30 50' stroke='rgba(255,255,255,0.9)' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'%3E&gt;%3C/polyline%3E%3C/svg%3E");
}
STEP 4:- Add srollbar in slider

/* Scrollbar */
#pSlider #slider-container::-webkit-scrollbar {
display: none;
height: 5px;
}
#pSlider #slider-container::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 50px;
}
#pSlider #slider-container::-webkit-scrollbar-track {
background-color: transparent;
}
/* Input */
#sliderSettings {
text-align: center;
}
#slider-width, #slider-height {
text-align: center;
margin-bottom: 20px;
}
h2 {
text-align: center;
}

CSS OUTPUT:-

JS code:

In JS we change height and weight of slidshow.for that we want to add some code in js as given in code…..

 // Only to conveniently set width and height in this pen.  
let widthInput = document.getElementById("slider-width");
widthInput.addEventListener("change", (e) => {
let currentValue = e.currentTarget.value;
let pSliderWidth = document.getElementById("pSlider");
pSliderWidth.style.width = `${currentValue}px`for that we want to add some ;
let liSlideWidth = document.getElementsByClassName(".li_slide");
for(let i = 0; i < liSlideWidth.length; i++) {
liSlideWidth[i].style.width = `${currentValue}px`;
}
})
let heightInput = document.getElementById("slider-height");
heightInput.addEventListener("change", (e) => {
let currentValue = e.currentTarget.value;
let pSliderWidth = document.getElementById("pSlider");
pSliderWidth.style.height = `${currentValue}px`;
let liSlideWidth = document.getElementsByClassName(".li_slide");
for(let i = 0; i < liSlideWidth.length; i++) {
liSlideWidth[i].style.height = `${currentValue}px`;
}
})

JS OUTPUT(FINAL OUTPUT):-

Now you sucessfully create AUTOPLAY CAROUSEL USING HTML,CSS AND JS.

It is not much hard to understand the code.If you face any difficulty comment down below.I hope you may like it.
WRITTEN BY – SAYALI KHARAT.

Share on:

Leave a Comment