library_books<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>

library_books<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>

library_books<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>