October 5, 2024
Hot News

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

adminc016 mins

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.

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 = '
'
      $('.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)
    }
  }
})

‘
$(‘.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.

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 *

Related News

Top