<div class="container">
    <div class="row">
        <div class="col-md-12">
      <h2>Pure JS &amp; CSS based responsive image slider - Scratch Code</h2>
    </div>
    
    <div class="col-md-12">
      <div class="slideshow-container">
        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOAyiW7U8AARcGE.jpg" style="width:100%">
          <div class="sliderhead">#TajMahal #UttarPradesh</div>
        </div>

        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOAyiW5UIAAl-6I.jpg" style="width:100%">
          <div class="sliderhead">#Solang #HimachalPradesh</div>
        </div>

        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOAyiW_VAAAA6Yo.jpg" style="width:100%">
          <div class="sliderhead">#Akshardham #Delhi</div>
        </div>

        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOA2b-fVwAAU6G5.jpg" style="width:100%">
          <div class="sliderhead">#GatewayOfIndia #Maharashtra</div>
        </div>

        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOA2b-hUMAApydf.jpg" style="width:100%">
          <div class="sliderhead">#MeenakshiTemple #TamilNadu</div>
        </div>

        <div class="mySlides fade">
          <img src="https://pbs.twimg.com/media/DOA2b-fV4AAbEIh.jpg" style="width:100%">
          <div class="sliderhead">#Guwahati #Assam</div>
        </div>
      </div>

      <div class="slideshow-controller">
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
        <span class="dot" onclick="currentSlide(3)"></span> 
        <span class="dot" onclick="currentSlide(4)"></span> 
        <span class="dot" onclick="currentSlide(5)"></span> 
        <span class="dot" onclick="currentSlide(6)"></span> 
      </div>
        </div>
    
    <div class="col-md-12">
      <p style="font-style: italic; color: #2196f3; font-size: 18px; text-align: center; margin-bottom: 20px;">Follow me on Twitter: <a href="https://twitter.com/mrdogra007/" target="_blank">@mrdogra007</a></p>
    </div>
    </div>
</div>

body { font-family: Roboto; margin: 0; padding: 0;}
h2 { font-size: 30px; margin: 50px 0 50px; text-align: center;}
.slideshow-container { max-width: 1000px; position: relative; margin: auto; margin-bottom: 10px;}
.slideshow-controller { text-align: center; margin-bottom: 50px;}
.mySlides { display: none;}
.mySlides img { box-shadow: 0px 0px 40px rgba(0,0,0,.25);}
.sliderhead { color: #f2f2f2; font-size: 30px; padding: 8px 12px; position: absolute; bottom: 20px; width: 100%; text-align: center; text-shadow: 0px 0px 10px rgba(0,0,0,.5);}
.dot { cursor:pointer; height: 8px; width: 8px; margin: 0 4px; background: #d9d9d9; border-radius: 50%; display: inline-block; transition: background-color .5s ease;}
.active, .dot:hover { background-color: #c7c7c7;}
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}