سلايدر شو احترافي مع العديد من المميزات

بواسطة Codex AIT
في
محتويات المقال:
من الأشياء الأساسية والمتطلبة لتصميم مواقع الشركات والمنظمات لعرض خدماتها ومنتجاتها هو السلايد شو او مايطلق عليه باللغة الإنجليزية carousel.
وهو عبارة عن صور او محتوى متحرك يمكن التنقل بينها بعدة طرق ومن ضمنها التشغيل التلقائي لذلك ، لهذا سأقدم لكم السلايد شو المفضل لدي وهو عبارة عن سلايدر مجاني ومفتوح المصدر ويتضمن العديد من الخيارات وسهل التركيب وهو slick carousel .

مميزات السلايد شو

1– متجاوب مع جميع الشاشات.
2– يستخدم CSS3 ، ولكن يعمل مع المتصفحات التي لاتدعم CSS3.
3– امكانية السحب والإفلات للصور بواسطة الماوس لجعل التنقل اكثر احترافية.
4– متحرك بشكل لانهائي حيث بعد اخر صورة ينتقل لأول صورة.
5– التنقل بواسطة الأسهم الجانبية .
6– التشغيل التلقائي.


خطوات تركيب السلايد شو 

اولا: قم بتنزيل ملفات السلايد شو من GitHub من هنـــــــــــــــــــــــا.
بعد التنزيل قم بإستخراج الملفات وانقل المجلد slick الى الحافطة التي ستنشئ فيها ملف html ، بعد ذلك سيتطلب منك تنزيل مكتبة جي كويري الإصدار 1.7 او أعلى اذا لم تتواجد معك من هنــــــــــــا.
ثانيا : انشئ ملف html واستدعي الملفات في رأس الصفحة داخل الوسم head كالتالي: 
<link href="slick/slick.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
ثالثا : اضف الكود التالي الى المكان الذي تريد اظهار السلايد شو فيه : 
<div class="your-class">
  <div>  your content  </div>
  <div>  your content  </div>
  <div>  your content  </div>
</div>
رابعا : اضف المحتوى او الصور بالمكان المحدد باللون الأحمر في الكود السابق وهذا مثال على ذلك بإضافة صور : 
	<div class="single_item" >
		<div> <img src="1.jpg" /></div>
		<div> <img src="2.jpg"/></div>
		<div> <img src="3.jpg"/></div>
	</div>
خامسا : استدعاء دالة التنفيذ وتحديد الإعدادات كالتالي : 
<script type="text/javascript">
$(document).ready(function(){
$('.single_item').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000
});
});
</script>

شرح إعدادات السلايد شو

الاعدادات يتم تمريرها بصيغة JSON وهذه الكائنات التي يستخدمها السلايد شو :
1- لتحديد عدد العناصر او الصور في السلايد الواحد : 
slidesToShow: 1
2- لتحديد ما إذا كنت تريد تفعيل التشغيل التلقائي للسلايد شو ام لا : 
autoplay: true
3- لتحديد سرعة السلايد شو بالمللي ثانية: 
autoplaySpeed: 2000
4- لتحديد ما إذا كنت تريد السلايد شو يعمل بشكل لانهائي : 
infinite: true
5- لتحديد ما إذا كنت تريد حركة السلايد شو على عنصر واحد او اكثر ، في حال اخترت اكثر من عنصر في السلايد الواحد: 
slidesToScroll: 1

بالنسبة للمحتوى او الصور يمكنك تنسيقه بأكواد CSS وأيضا الكلاس الرئيسي الخاص بالسلايد شو بما يتناسب مع واجهة الموقع الذي تصممه ، وهذا مثال كامل على السلايد شو : 
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="slick/slick.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.single_item').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000
});
});
</script>
<style type="css/text">
.single_item{
max-width:990px;
padding:20px;
margin-right:auto;
margin-left:auto;
background:#fff;
}
body{background:#ddd;}
</style>
</head>
<body>

	<div class="single_item" >
		<div> <img src="1.jpg" /></div>
		<div> <img src="2.jpg"/></div>
		<div> <img src="3.jpg"/></div>
		<div> <img src="1.jpg"/></div>
		<div> <img src="2.jpg"/></div>
		<div> <img src="3.jpg"/></div>
		<div> <img src="4.png"/></div>
	</div>

</body>
</html>

تركيب خاصية center mode في slick slider plugin

كانت هناك مشكلة في تركيب الخاصية او النمط center mode في سلايدر سليك والحمدلله تم حلها ، حيث الحل يكمن في عمل كلاس css يحتوي على الخاصية transform لتكبير السلايد الوسط.
وبإمكانك اضافة العديد من التنسيقات لهذا الكلاس المحدد مسبقا بإسم slick-center كما هو موضح بالمثال التالي: 
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

<link href="slick/slick.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>

<style type="text/css">
.center{
max-width:820px;
margin-right:auto;
margin-left:auto;
background:#fff;
height:auto;
}
.center .slick-center h3 {
    color: #E67E22;
    opacity: 1;
    transform: scale(1.4);
}
.center div h3{width:190px;text-align:center;background:#ccc;font-size:120px;height:auto;}
body{background:#ddd;}
</style>

</head>
<body>
<div class="center" >
		<div> <h3>1</h3></div>
		<div> <h3>2</h3></div>
		<div> <h3>3</h3></div>
		<div> <h3>4</h3></div>
		<div> <h3>5</h3></div>
		<div> <h3>6</h3></div>
		<div> <h3>7</h3></div>
</div>

<script type="text/javascript">
    $('.center').slick({
        centerMode: true,
        infinite: true,
        centerPadding: '60px',
        slidesToShow: 3,
        speed: 500,
        responsive: [{
            breakpoint: 768,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
            }
        }, {
            breakpoint: 480,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
            }
        }]
    });
</script>
</body>
</html>
أيضا يمكنك استدعاء ملفات السلايد شو من شبكة CDN من الروابط التالية: 
CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
الى هنا انتهى الشرح ،واذا واجهتم أي مشكلة في التركيب او لديكم استفسار حول السلايد شو فلا تتردوا بوضعه في تعليق ، دمتم في رعاية الله وحفظه.
الكلمات المفتاحية:

مواضيع ذات صلة