Slider
Structure
<div class="slideshow">
<div class="slides">
<img src="images/1.jpg">
<div class="text">Text One</div>
</div>
<div class="slides">
<img src="images/2.jpg">
<div class="text">Text Two</div>
</div>
<div class="slides">
<img src="images/3.jpg">
<div class="text">Text Three</div>
</div>
<div class="slides">
<img src="images/4.jpg">
<div class="text">Text Four</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
Style
<style>
*{box-sizing:border-box;}
/* Slideshow container */
.slideshow{
max-width: 800px;
position: relative;
margin: auto;
overflow: hidden;
}
.slides img{
width:100%;
max-height: 300px;
display: block;
}
.slides{
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -30px;
padding: 16px;
color: white;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 50% 50% 0;
text-shadow: 0 0 6px rgba(0, 0, 0,.6);
}
/* Position "next button" to the right */
.next {
right: 0;
border-radius: 50% 0 0 50%;
}
/* On hover, add a black background transparent color*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Text */
.text {
color: #fff;
font-size: 25px;
padding: 8px;
position: absolute;
bottom: 28px;
width: 100%;
text-align: center;
}
/* The dots container */
.dots{
position:absolute;
bottom:10px;
left:50%;
transform:translate(-50%,0%);
display:flex;
justify-content:center;
}
/* The dots */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 4px;
background-color:black;
border-radius: 50%;
border:2px solid white;
}
.dot.active, .dot:hover {
background-color: #26a69a;
}
.fadein {
display: block;
animation:fade 1s;
}
@keyframes fade {
from {opacity: .5;}
to {opacity: 1;}
}
</style>
Process
<script src="jquery.min.js"></script>
<script>
var index=0;
var l = $(".dot").length-1;
$(".dot:first-child").addClass("active");
$(".slides:first-child").addClass("fadein");
$(".dot").click(function(){
index=$(this).index();
playSlide();
});
$(".slideshow a").click(function(){
if($(this).hasClass("prev"))index-=1;
if($(this).hasClass("next"))index+=1;
playSlide();
});
function playSlide(){
$(".dot.active").removeClass("active");
if (index > l) {index = 0;}
if (index < 0) {index = l;}
$(".slides.fadein").removeClass("fadein");
$(".slides").addClass(function(n){if(n==index)return "fadein";});
$(".dot").addClass(function(n){if(n==index)return "active";});
}
</script>