At work recently I have been working on a WordPress site and was asked to put up a blog post for a client. The requirements included making a mini gallery of images with titles and descriptions that could be navigated with a slider. I thought that would be simple enough and so I went looking for slider plugins to install. Unfortunately for me, after several attempts, none of the sliders I found appeared to work with the site. That was likely due to some plugin or another not playing well with the site.. so I decided to write one myself. I’ll share my code here, and put a simple example at the end of the post.

Finding some code
My first step was to Google search a simple CSS slider. The requirements didn’t call for a lot of functionality and so a simple one would be best. I knew that there would likely be a Javascript requirement and that’s the area I would need to most help. This search led me to the W3Schools site. That overall look matched what the client had described and it seemed fairly simple to implement so I decided to base my code on that.

Breaking it down
I made some adjustments and tried to drop the sample code right on to the WordPress page for testing (and honestly I was hoping it would work right there so I could save some time.) There were a few errors such as the WordPress editor not liking the Javascript and the post adding in <p> tags where I didn’t want them. The led me to breaking apart the code into CSS, HTML, and Javascript and then placing them where they should actually be in the site. That’s the best thing to do anyway, and cutting corners in development just doesn’t benefit anyone in the long run. Here’s the breakdown of what I ended up with:

The Code
Let’s start with the CSS. I modified the class names from the original source in an attempt to avoid possible name collisions.

/* CSS for Slider */
.mySlides {display:none;box-sizing:border-box;padding:0;position:relative;}
.mySlides p {line-height:0px;margin:0;padding:0;}
.slideshow-container {max-width: 800px;position: relative;margin: auto;box-sizing:border-box;width:100%;}
.sliderPrev, .sliderNext {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 30px 16px;margin-top: -75px;color: white;font-weight: bold;font-size: 50px;transition: 0.6s ease;border-radius: 0 3px 3px 0;font-family: Verdana,sans-serif; text-decoration:none !important;box-sizing:border-box;}
.sliderNext {right: 0;border-radius: 3px 0 0 3px;}
.sliderPrev:hover, .sliderNext:hover {background-color: rgba(0,0,0,0.8);}
.sliderHeader {color:#ffffff !important;background-color:rgba(72,108,136,0.9);text-align:left; font-size:28px !important; padding:8px 30px;margin:0 !important; position:absolute;top:10px;box-sizing:border-box;width:100%;}
.sliderText {color: #ffffff !important;background-color:rgba(72,108,136,0.9);padding: 8px 30px;bottom: 10px !important;width: 100%;text-align: left;font-size:18px !important;box-sizing:border-box;position:absolute;bottom:0;box-sizing:border-box;}
.sliderDot {cursor:pointer;height: 13px;width: 13px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;box-sizing:border-box;}
.sliderPicker {text-align:center;width:100%; max-width:800px;}
.sliderPicker br {display:none;}
.sliderActive, .sliderDot:hover {background-color: #717171;}
.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}
}
@media only screen and (max-width: 767px) {
  .sliderHeader {position:initial;}
  .sliderText {position:initial;}
}
/* END CSS for Slider */

This is the HTML I placed on the page.

<div class="slideshow-container">
  <div class="mySlides sliderFade">
    <div class="sliderHeader">Finding a Destination</div>
      <img src="http://www.richardlmurdock.com/wp-content/uploads/2017/02/slider_choose_destination.jpg" style="width:100%"></p>
    <div class="sliderText">Some people will want far way beaches, others will want to explore the mountains of an ancient land. Find a destination that calls to you and resonates with your soul.</div>
  </div>
  <div class="mySlides sliderFade">
    <div class="sliderHeader">Get packed</div>
      <img src="http://www.richardlmurdock.com/wp-content/uploads/2017/02/slider_get_packed.jpg" style="width:100%"></p>
    <div class="sliderText">Be sure to organize your travelling supplies well in advance. Have a stash of emergency cash you can access in case your luggage is lost at some point.</div>
  </div>
  <div class="mySlides sliderFade">
    <div class="sliderHeader">Rent transportation</div>
      <img src="http://www.richardlmurdock.com/wp-content/uploads/2017/02/slider_old_car.jpg" style="width:100%"></p>
    <div class="sliderText">Once you are there, make sure you have a reliable mode of transportation. You don't want to be stuck in your hotel room because your forgot to rent a car (or scooter, or horse, or whatever)</div>
  </div>
  <div class="mySlides sliderFade">
    <div class="sliderHeader">A cool old ship</div>
      <img src="http://www.richardlmurdock.com/wp-content/uploads/2017/02/slider_old_ship.jpg" style="width:100%"></p>
    <div class="sliderText">I think I'd trust the WillowMoon to take me on a grand sea adventure, for sure.</div>
  </div>
  <div class="mySlides sliderFade">
    <div class="sliderHeader">Find a fluffy kitty</div>
      <img src="http://www.richardlmurdock.com/wp-content/uploads/2017/02/slider_fluffy_kitty.jpg" style="width:100%"></p>
    <div class="sliderText">And just to make sure we enjoy our trip, we'll take along the fluffiest of travelling companions.</div>
  </div>
<a class="sliderPrev" onclick="plusSlides(-1)">%u276E</a><br />
<a class="sliderNext" onclick="plusSlides(1)">%u276F</a>
</div>

<div class="sliderPicker">
<span class="sliderDot" onclick="currentSlide(1)"></span><br />
<span class="sliderDot" onclick="currentSlide(2)"></span><br />
<span class="sliderDot" onclick="currentSlide(3)"></span><br />
<span class="sliderDot" onclick="currentSlide(4)"></span><br />
<span class="sliderDot" onclick="currentSlide(5)"></span>
</div>

Here is the Javascript. It’s mainly unmodified except for the class names I needed to update to match my new CSS classes.

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("sliderDot");
  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(" sliderActive", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className  = " sliderActive";
}

And finally, here is the example code in action as a slider. This was a fun little project and helped me make a good impression on our client. I hope you find it useful in some way.