اسلایدر
این یک پلاگین جی کوئری پاسخگو است که از چندین نقطه توقف، انتقال CSS3، رویدادهای لمسی / کشیدن و خیلی بیشتر پشتیبانی میکند!
برای اطلاعات بیشتر به این سایت مراجعه نمایید: مستندات اسلایدر.
آیتم تکی
<div class="slick" data-arrows="true"> <div class="slide"> <h3>1</h3> </div> <div class="slide"> <h3>2</h3> </div> <div class="slide"> <h3>3</h3> </div> </div>
چند آیتمی
<div class="widget widget_slider"> <div class="slick" data-arrows="true" data-num-slides="3" data-num-scroll="3"> <div class="slide"> <h3>1</h3> </div> // ... Other slides </div> </div>
نمایش واکنشگرا
$('.responsive').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] });
عرض متغیر
<div class="slick" data-variable-width="true" data-center="true"> <!-- Don't forget to specify width for each slide --> <div class="slide" style="width:200px"> <h3>200</h3> </div> // ... Other slides </div>
افکت محو
<div class="slick" data-fade="true"> <div class="slide"> <h3 class="bg-primary">1</h3> </div> <div class="slide"> <h3 class="bg-primary">2</h3> </div> <div class="slide"> <h3 class="bg-primary">3</h3> </div> </div>
حالت خودکار غیر فعال
<div class="slick" data-autoplay="false"> <div class="slide"> <h3 class="bg-primary">1</h3> </div> <div class="slide"> <h3 class="bg-primary">2</h3> </div> <div class="slide"> <h3 class="bg-primary">3</h3> </div> </div>
بدونArrow
<div class="slick" data-autoplay="false"> <div class="slide"> <h3 class="bg-primary">1</h3> </div> <div class="slide"> <h3 class="bg-primary">2</h3> </div> <div class="slide"> <h3 class="bg-primary">3</h3> </div> </div>