carousel

يمكنك تنفيذ ذلك الكود عن طريق إستخدام JQuery و HTML ثم ربطهم عن طريق الوسم link

$().ready(function(){
  $('.slick-carousel').slick({
    arrows: true,
    centerPadding: "0px",
    dots: true,
    infinite: true,
    slidesToShow: 3,
    centerMode: true
  });
});

كود الـ HTML :

<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slick-carousel">
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
</div>
			
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

حيثُ أن في الكود الأول تم إضافة function تحمل الإسم slick-carousel ثم ربطها في الـ HTML عن طريق class لتعريفها داخل الملف و ذلك بعد إستدعاء و ربط ملف الـ jQuery

كما تم تفعيل إختيار ظهور المؤشرات arrows و النقاط dots عن طريق القيمة True و تعيين عدد النتائج الظاهره فوق نقاط المؤشر slidesToShow إلى 3 نتائج فقط و يمكن تعديلها حسب الرغبه