اذهب إلى المحتوى
  • 0

carousel

منتصر احمد

السؤال

Recommended Posts

  • 1

يمكنك تنفيذ ذلك الكود عن طريق إستخدام 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 نتائج فقط و يمكن تعديلها حسب الرغبه

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...