Simple jQuery Slider

index.html

<div id="slider">
  <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>

script.js

jQuery(document).ready(function ($) {
	
	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');
  
	setInterval(function () {
		$('#slider ul').animate({
			left: - slideWidth
		}, 200, function () {
			$('#slider ul li:first-child').appendTo('#slider ul');
			$('#slider ul').css('left', '');
		});
	}, 3000);
  
});    

Simple-jQuery-Slider.markdown

Simple jQuery Slider

A script easy to implement in own enviroment.

A Pen by Alexander Schmidt on CodePen.

License.

style.css

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
}

#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;
}

style.less

#slider {
  
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  
  ul {
      
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
      
    li {
      position: relative;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 500px;
      height: 300px;
      background: #ccc;
      text-align: center;
      line-height: 300px;
    }
      
  }
  
}