Custom Next/Prev Thumb For Slick Slider

There are so many different types of jQuery sliders available these days, sliding horizontal panels, transition effects, patch down/up, fade in/out etc… jQuery Image sliders are great for grabbing a visitor's attention immediately and showing them the key features of your business. jQuery content sliders can be used to elegantly show information about your business without scaring off visitors.   

Here, we have discussed  Slick Slider. Most popular and free jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions for web design services.

We have used here the features of a slick slider and added custom next/prev thumbs for NEXT and PREVIOUS images. A previous/next button is added for changing the slide.

Other than that we have added below the slide image a small image thumb which can be used as the previous/next button. The image thumb contains the image present in the previous/next position. This feature helps to get rid of sliding throughout the slider to view the required slider. For responsive web design service, a small description of the slide that is active is also given it.

We have used simple Html, CSS and Javascript code along with slick-slider plugins.  Note: Do not forget to include slick.css, slick-theme.css, and slick.js files other than the below code.

HTML:
<section class="slideshow__slides slider">
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img1.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img2.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img3.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img4.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img5.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
  </section>

CSS:
/* Slick slider Design */
.slider {
  position: relative;
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
}
.slick-slide img {
  width: 100%;
}
/* Slider Caption Design */
.slider-image {
  position: relative;
}
.slider-image .slider-caption-wrap {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
  color: #FFF;
  vertical-align: top;
}
.slider-image .slider-caption-wrap .caption-details {
  display: block;
  height: 100px;
  width: -webkit-calc(100% - 430px);
  width: -moz-calc(100% - 430px);
  width: -ms-calc(100% - 430px);
  width: calc(100% - 430px);
  margin: 0 auto;
  padding: 10px 0;
  overflow: auto;
  font-size: 16px;
  line-height: 1.4;
}
/* Slider thumbnails and Slider Nav Design */
.slick-thumb-nav img {
  width: 200px;
}
.slick-arrow {
  top: auto;
  bottom: 0;
  z-index: 9;
  display: inline-block;
  height: auto;
  width: auto;
  margin-bottom: 0;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
.slick-arrow.slick-prev {
  left: 0;
}
.slick-arrow.slick-next {
  right: 0;
}
.slick-arrow:before { display: none; }
.slick-arrow .arrow-icon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  background-color: rgba(0, 0, 0, .5);
  color: #FFF;
  font-size: 55px;
  opacity: 0;
  -webkit-transition: .5s all ease 0s;
  -moz-transition: .5s all ease 0s;
  -ms-transition: .5s all ease 0s;
  transition: .5s all ease 0s;
}
.slideshow__slides:hover .slick-arrow .arrow-icon {
  opacity: 1;
}
.slick-arrow .arrow-icon span {
  display: inline-block;
  padding: 50px 0;
  font-size: 55px;
}
.slick-arrow .arrow-icon.prev-slick-arrow {
  left: 0;
}
.slick-arrow .arrow-icon.next-slick-arrow {
  right: 0;
}
/* Slider dot design */
.slick-dots li button:before {
  font-size: 16px;
}

/**
 * Responsive design
 */
@media (max-width: 992px) {
  /* Slider Nav Design */
  .slick-arrow .arrow-icon { display: none; }
}
@media (max-width: 640px) {
  /* Slider thumbnails Design */
  .slick-thumb-nav img {
    width: 120px;
  }
  /* Slider Caption Design */
  .slider-image .slider-caption-wrap .caption-details {
    height: 60px;
    width: -webkit-calc(100% - 260px);
    width: -moz-calc(100% - 260px);
    width: -ms-calc(100% - 260px);
    width: calc(100% - 260px);
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  /* Slider thumbnails Design */
  .slick-thumb-nav img {
    width: 85px;
  }
  .slick-arrow .slick-thumb-nav {
    margin-bottom: 0;
  }
  .slick-prev .slick-thumb-nav {
    margin-left: 0;
  }
  .slick-next .slick-thumb-nav {
    margin-right: 0;
  }
  /* Slider Caption Design */
  .slider-image .slider-caption-wrap {
    position: relative;
    bottom: auto;
  }
  .slider-image .slider-caption-wrap .caption-details {
    height: 43px;
    width: -webkit-calc(100% - 185px);
    width: -moz-calc(100% - 185px);
    width: -ms-calc(100% - 185px);
    width: calc(100% - 185px);
    padding: 3px 0;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  /* Slider dot design */
  .slick-dots li { margin: 0; }
  .slick-dots li button:before {
    font-size: 12px;
  }
}

Javascript:
(function ($) {
  $(function() {

    // Slick slider for prev/next thumbnails images
    $('.slideshow__slides').slick({
      dots: true,
      slidesToShow: 1,
      autoplay: false
    });
    setTimeout(function() {
      $('.slick-prev').prepend('<div class="prev-slick-arrow arrow-icon"><span>&#60;</span></div><div class="prev-slick-img slick-thumb-nav"><img src="/prev.jpg" class="img-responsive"></div>');
      $('.slick-next').append('<div class="next-slick-arrow arrow-icon"><span>&#62;</span></div><div class="next-slick-img slick-thumb-nav"><img src="/next.jpg" class="img-responsive"></div>');
      get_prev_slick_img();
      get_next_slick_img();
    }, 500);

    $('.slideshow__slides').on('click', '.slick-prev', function() {
      get_prev_slick_img();
    });
    $('.slideshow__slides').on('click', '.slick-next', function() {
      get_next_slick_img();
    });
    $('.slideshow__slides').on('swipe', function(event, slick, direction) {
      if (direction == 'left') {
        get_prev_slick_img();
      }
      else {
        get_next_slick_img();
      }
    });
    $('.slick-dots').on('click', 'li button', function() {
      var li_no = $(this).parent('li').index();
      if ($(this).parent('li').index() > li_no) {
        get_prev_slick_img()
      }
      else {
        get_next_slick_img()
      }
    });
    function get_prev_slick_img() {
      // For prev img
      var prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src');
      $('.prev-slick-img img').attr('src', prev_slick_img);
      $('.prev-slick-img').css('background-image', 'url(' + prev_slick_img + ')');
      // For next img
      var prev_next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src');
      $('.next-slick-img img').attr('src', prev_next_slick_img);
      $('.next-slick-img').css('background-image', 'url(' + prev_next_slick_img + ')');
    }
    function get_next_slick_img() {
      // For next img
      var next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src');
      $('.next-slick-img img').attr('src', next_slick_img);
      $('.next-slick-img').css('background-image', 'url(' + next_slick_img + ')');
      // For prev img
      var next_prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src');
      $('.prev-slick-img img').attr('src', next_prev_slick_img);
      $('.prev-slick-img').css('background-image', 'url(' + next_prev_slick_img + ')');
    }
    // End
  })
})(jQuery);