Simple JQuery Carousel Slider Tutorial

Ini adalah JQuery Carousel Slider yang sering saya gunakan cukup sering dalam proyek-proyek saya, itu adalah versi yang paling dasar dan titik awal yang bagus jika Anda ingin belajar bagaimana menggunakannya animasi dengan JQuery.

Dengan slider ini Anda akan dapat dengan mudah mengubah dimensi, animation times, and choose custom classes.

DEMO

• DEMO Klik disini!!!

HTML

<ul class="slider">
 <li>
   <img src="/image-1.jpg" />
 </li>
 <li>
   <img src="/image-2.jpg" />
 </li>
 <li>
   <img src="/image-3.jpg" />
 </li>
 <li>
   <img src="/image-4.jpg" />
 </li>
</ul>

CSS

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

jQuery Javascript

jQuery(function($) { 

  // settings
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );

});

Ini adalah yang pertama datang dari serangkaian tutorial tentang jQuery slider. Saya akan menambahkan lebih banyak fitur segera.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250