Very Simple jQuery CSS Slider

Adding a slider on website is cool idea to display multiple images in single frame. That’s why in this post I am going to share simple slider script in CSS and jQuery without external plugin and you can customize the script as per your need. The slider also have auto play feature when you check auto play, slider automatically slide image after selected no of seconds or your can manually navigate via next or previous buttons.

Very Simple jQuery CSS Slider

HTML

<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>
 
<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>



CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 
 
html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}
 
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}
 
h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}
 
#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}
 
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}
 
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}
 
a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}
 
a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
 
a.control_prev {
  border-radius: 0 2px 2px 0;
}
 
a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}
 
.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}



JS

jQuery(document).ready(function ($) {
 
  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
 
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
 
    $('#slider').css({ width: slideWidth, height: slideHeight });
 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
 
    $('#slider ul li:last-child').prependTo('#slider ul');
 
    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
 
    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
 
    $('a.control_prev').click(function () {
        moveLeft();
    });
 
    $('a.control_next').click(function () {
        moveRight();
    });
 
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by zuraizm. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

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.