Simple and Clean Image Slider For Website Banner using jQuery & CSS

If you are looking for a banner slider script in CSS & jQuery then in this tutorial I am going to share simple and clean jquery and CSS based image slider plugin which you can use as your website sliding banner it’ll surely give cool look to your website. Sliding image size is adjusted automatically, so there is no need to re-size image files. The slider has features like auto play, infinite loop, background image, image caption, slider controls, responsive design and smooth sliding animation effect.
Image Slider For Website Banner using jQuery & CSS


Integrate Image Slider as Website Banner using jQuery & CSS

Library

First Include jQuery library on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Create div container and add images with captions and controls to the carousel slider following html markup.

<div class="slide-window">
        <div class="slide-wrapper" style="width: 300%;">
          <div class="slide">
            <a href="#" target="_blank">
              <div class="slide-image" style="background-image: url(img/slide1.jpg)">
              </div>
              <div class="slide-caption">
                <h2>AUTONOMY</h2>
                <p>Always keep the sun in your heart.</p>
              </div>
            </a>
          </div>
          <div class="slide">
            <a href="#" target="_blank">
              <div class="slide-image" style="background-image: url(img/slide2.jpg)">
              </div>
              <div class="slide-caption">
                <h2>MASTERY</h2>
                <p>Mastery takes a little time. Give your heart the sun light and grow carefuly.</p>
              </div>
            </a>
          </div>
          <div class="slide">
            <a href="#" target="_blank">
              <div class="slide-image" style="background-image: url(img/slide3.jpg)">
              </div>
              <div class="slide-caption">
                <h2>PURPOSE</h2>
                <p>People who can find a purpose can enjoy the life. As a result, it grows more than anyone, and will be able to contribute.</p>
              </div>
            </a>
          </div>
        </div>
        <div class="slide-controller">
          <div class="slide-control-left">
            <div class="slide-control-line"></div>
            <div class="slide-control-line"></div>
          </div>
          <div class="slide-control-right">
            <div class="slide-control-line"></div>
            <div class="slide-control-line"></div>
          </div>
        </div>
      </div>



CSS

Add following CSS on page for styling your image slider/carousel.

.slide-window {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.slide-window .slide-wrapper {
  position: relative;
  left: 0;
  display: flex;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}
.slide-window .slide-wrapper .slide {
  position: relative;
  width: 100%;
}
.slide-window .slide-wrapper .slide:before {
  content: "";
  display: block;
  padding-top: 41.17%;
}
.slide-window .slide-wrapper .slide .slide-image {
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.slide-window .slide-wrapper .slide .slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7));
}
.slide-window .slide-wrapper .slide .slide-caption h2 {
  margin: 2rem 4.5rem;
  font-size: 2rem;
}
.slide-window .slide-wrapper .slide .slide-caption p {
  margin: -1rem 4.5rem 3rem;
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .slide-window .slide-wrapper .slide .slide-caption h2 {
    margin: 0 3rem 1.5rem;
    font-size: 1.2rem;
  }
  .slide-window .slide-wrapper .slide .slide-caption p {
    margin: -1rem 3rem 1.75rem;
    font-size: .8rem;
  }
}
.slide-window:hover .slide-control-left {
  left: 1%;
  opacity: 1;
}
.slide-window:hover .slide-control-right {
  right: 1%;
  opacity: 1;
}
 
.slide-control-left {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  left: 10%;
  right: auto;
}
.slide-control-left .slide-control-line {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  left: 12px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.slide-control-left .slide-control-line:nth-child(2) {
  -webkit-transform: translateY(1px) rotate(-135deg);
  transform: translateY(1px) rotate(-135deg);
}
.slide-control-left .slide-control-line:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.slide-control-left:hover {
  background-color: #fff;
}
.slide-control-left:hover .slide-control-line:after {
  background-color: #aaa;
}
.slide-control-left .rotate-left-top:after {
  animation: arrowLineRotation 0.49s;
}
.slide-control-left .rotate-left-down:after {
  animation: arrowLineRotationRev 0.49s;
}
@media screen and (max-width: 767px) {
  .slide-control-left {
    height: 30px;
    width: 30px;
    opacity: 1;
  }
  .slide-control-left .slide-control-line {
    left: 9px;
    height: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .slide-control-left {
    opacity: 1;
    left: 1%;
  }
}
 
.slide-control-right {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  right: 10%;
  left: auto;
}
.slide-control-right .slide-control-line {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  right: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.slide-control-right .slide-control-line:nth-child(2) {
  -webkit-transform: translateY(1px) rotate(135deg);
  transform: translateY(1px) rotate(135deg);
}
.slide-control-right .slide-control-line:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.slide-control-right:hover {
  background-color: #fff;
}
.slide-control-right:hover .slide-control-line:after {
  background-color: #aaa;
}
.slide-control-right .rotate-right-down:after {
  animation: arrowLineRotation 0.49s;
}
.slide-control-right .rotate-right-top:after {
  animation: arrowLineRotationRev 0.49s;
}
@media screen and (max-width: 767px) {
  .slide-control-right {
    height: 30px;
    width: 30px;
    opacity: 1;
  }
  .slide-control-right .slide-control-line {
    right: 9px;
    height: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .slide-control-right {
    opacity: 1;
    right: 1%;
  }
}
 
@keyframes arrowLineRotation {
  to {
    transform: rotate(180deg);
  }
}
@keyframes arrowLineRotationRev {
  to {
    transform: rotate(-180deg);
  }
}
.slide-control-btn ul {
  position: absolute;
  padding: 0;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.slide-control-btn ul li {
  margin: 0 5px;
  list-style: none;
}
.slide-control-btn ul li a {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.slide-control-btn ul li a.active, .slide-control-btn ul li a:hover {
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .slide-control-btn ul {
    margin: .5rem 0;
  }
  .slide-control-btn ul li a {
    width: 10px;
    height: 10px;
  }
}



JS

Write all the javascript & jQuery function to control slider just after jQuery library.

$(document).ready(function(){
  if ($('.slide-window')) {
 
    var slideNum = $('.slide').length - 1
    var maxSlideNum = $('.slide').length - 1
    var slideWidth = $('.slide-window').outerWidth()
    var slideSetWidth = slideWidth * slideNum
    var controlSlideBtnLeft = '.slide-control-left'
    var controlSlideBtnRight = '.slide-control-right'
    var controlSlideBtnList = '.slide-control-btn ul li a'
 
    addSlideCtlBtn()
 
    var slideCurrent = 0
    var slideActiveBtn = 0
    var rotationInterval = setInterval(function(){
      slideCurrent++
      if (slideCurrent > maxSlideNum) {
        slideCurrent = 0
      }
      activation()
      sliding()
    }, 10000)
 
    $(controlSlideBtnLeft).on('click', function(){
      resetInterval()
      slideCurrent--
      if (slideCurrent < 0) {
        slideCurrent = maxSlideNum
      }
      activation()
      rotateArrow('left')
      sliding()
    })
    $(controlSlideBtnRight).on('click', function(){
      resetInterval()
      slideCurrent++
      if (slideCurrent > maxSlideNum) {
        slideCurrent = 0
      }
      activation()
      rotateArrow('right')
      sliding()
    })
    $(controlSlideBtnList).on('click', function(){
      resetInterval()
      slideCurrent = $(controlSlideBtnList).index(this)
      activation()
      sliding()
    })
 
    function addSlideCtlBtn() {
      var slideCtlBtn = '<div class="slide-control-btn"><ul>'
      for (var i = 0; i <= maxSlideNum; i++) {
        if (i==0) {
          slideCtlBtn += '<li><a class="active"></a></li>'
        }
        else {
          slideCtlBtn += '<li><a class=""></a></li>'
        }
      }
      slideCtlBtn += '</ul></div>'
      $('.slide-controller').append(slideCtlBtn)
    }
    function resetInterval() {
      clearInterval(rotationInterval)
      rotationInterval = setInterval(function(){
        slideCurrent++
        if (slideCurrent > maxSlideNum) {
          slideCurrent = 0
        }
        activation()
        sliding()
      }, 10000)
    }
    function activation() {
      slideActiveBtn = slideCurrent + 1
      $( controlSlideBtnList + '.active' ).removeClass()
      $('.slide-control-btn ul li:nth-child(' + slideActiveBtn + ') a').addClass('active')
    }
    function rotateArrow(direction) {
      var slideCtlLine1 = '.slide-control-' + direction + ' .slide-control-line:nth-child(1)'
      var slideCtlLine2 = '.slide-control-' + direction + ' .slide-control-line:nth-child(2)'
      $(slideCtlLine1).removeClass('rotate-' + direction + '-top')
      $(slideCtlLine2).removeClass('rotate-' + direction + '-down')
      $(slideCtlLine1).outerWidth()
      $(slideCtlLine2).outerWidth()
      $(slideCtlLine1).addClass('rotate-' + direction + '-top')
      $(slideCtlLine2).addClass('rotate-' + direction + '-down')
    }
    function sliding() {
      $('.slide-wrapper').css('left', slideCurrent * -slideWidth)
    }
  }
})

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.