يمكنك الاستعانة بمكتبة slick، بعد إضافة JQuery بشكل صحيح إلى مشروعك نضيف الوسوم التالية ضمن وسم head:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
بعدها نضيف الشيفرة التالية لجعل المكتبة تحول المحتوى إلى شرائح للعرض:
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
قد تحتاج لتنسيق الصور بحسب حجمها لتناسب حجم الشرائح