Member-only story

How to create banner slider (carousel)

Thilak
2 min readDec 5, 2021

--

codepen->

HTML

<body>
<section class="section">
<div class="slider">
<div class="slide">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<div class="st first"><img src="https://cdn-images-1.medium.com/max/750/0*oatud1IibVazIquw.jpg"></div>
<div class="st "><img src="https://cdn-images-1.medium.com/max/750/0*oatud1IibVazIquw.jpg"></div>
<div class="st "><img src="https://cdn-images-1.medium.com/max/750/0*oatud1IibVazIquw.jpg"></div>
<div class="st "><img src="https://cdn-images-1.medium.com/max/750/0*oatud1IibVazIquw.jpg"></div>
<div class="nav-auto">
<div class="a-b1"></div>
<div class="a-b2"></div>
<div class="a-b3"></div>
<div class="a-b4"></div>
</div>
<div class="nav m">
<label for="radio1" class="m-btn"></label>
<label for="radio1" class="m-btn"></label>
<label for="radio1" class="m-btn"></label>
<label for="radio1" class="m-btn"></label>

</div>
</div></div>

--

--

No responses yet