Today we would like to share this concept of Pure Css Carousel With Arrows Navigation. The new concept to make a fully functional carousel with next/previous arrows. The number of images/items that you want to display in the carousel.
This is just a simple way to do slider navigation arrows.
see the code for how to create a pure CSS carousel with arrows navigation.
Code for pure css carousel with arrows navigation in Html:
<input type="radio" name="slide-trigger" value="first" id="first" checked />
<input type="radio" name="slide-trigger" value="second" id="second" />
<input type="radio" name="slide-trigger" value="third" id="third" />
<input type="radio" name="slide-trigger" value="fourth" id="fourth" />
<div id="slider">
<div id="slider-inner">
<div id="first-slide" class="slide">
<label for="fourth"><</label>
<img src="img/image-1.jpg">
<label for="second">></label>
</div>
<div id="second-slide" class="slide">
<label for="first"><</label>
<img src="img/image-2.jpg">
<label for="third">></label>
</div>
<div id="third-slide" class="slide">
<label for="second"><</label>
<img src="img/image-3.jpg">
<label for="fourth">></label>
</div>
<div id="fourth-slide" class="slide">
<label for="third">></label>
<img src="img/image-4.jpg">
<label for="first">></label>
</div>
</div>
</div>
Code for pure css carousel with arrows navigation in Css:
#slider{
width:500px;
awidth:100%;
height:300px;
aheight:75%;
aborder:5px solid;
overflow:hidden;
margin:0 auto;
}
#slider img{
width: 100%;
height: auto;
}
#slider-inner{
position:relative;
width:2100px;
awidth:500%;
height:300px;
aheight:75%;
margin-left:-47px;
-webkit-transition:all .7s cubic-bezier(0.68,-0.55,0.265,1.55);
transition:all .7s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#slider-inner div{
position:relative;
width:500px;
awidth:100%;
height:300px;
aheight:75%;
display:inline-block;
margin-left:-5px;
atext-align:center;
}
#slider-inner div label{
position:absolute;
font-size: 40px;
border:2px solid #fff;
color: #fff;
border-radius:50%;
width: 42px;
height: 42px;
opacity:0;
cursor:pointer;
-webkit-transition:opacity .7s .4s, background .2s;
transition:opacity .7s .4s, background .2s;
}
#slider-inner div label:nth-of-type(1){
left:15px;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
padding:0 11px 0 9px;
z-index:999;
}
#slider-inner div label:nth-of-type(2){
right:25px;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
padding:0 9px 0 11px;
}
#slider-inner div label:hover{background:rgba(255,255,255,.5)}
#first:checked ~ #slider #slider-inner{
margin-left:-47px;
}
#first:checked ~ #slider #slider-inner #first-slide label{
opacity:1;
}
#second:checked ~ #slider #slider-inner{
margin-left:-547px;
}
#second:checked ~ #slider #slider-inner #second-slide label{
opacity:1;
}
#third:checked ~ #slider #slider-inner{
margin-left:-1047px;
}
#third:checked ~ #slider #slider-inner #third-slide label{
opacity:1;
}
#fourth:checked ~ #slider #slider-inner{
margin-left:-1547px;
}
#fourth:checked ~ #slider #slider-inner #fourth-slide label{
opacity:1;
}
input {
display: none;
}
Use this html and css code on your website.
0 Comments