كيفية بناء معرض جذاب للصور يستجيب لجميع الشاشات مع slick.js

Arabic (العربية/عربي) translation by Amr Salah (you can also view the original English article)

في هذا البرنامج التعليمي ، سنستخدم slick.js ، وهو ملحق jQuery شائع ، لإنشاء معرض صور جذاب سريع الاستجابة. في ما يلي المعرض الذي سننشئه:

Please accept marketing cookies to load this content.

احرص على التحقق من إصدار الشاشة الكاملة وتغيير حجم نافذة المتصفح لمعرفة كيف يتغير تنسيقه اعتمادًا على حجم إطار العرض.

ماهو slick.js؟

"Slick.js" هو ملحق jQuery مشهور تم إنشاؤه بواسطة Ken Wheeler والذي يتيح لك إنشاء دوارات متجاوبة جميلة. لفهم أفضل لما يمكن أن يقدمه لك هذا المكون الإضافي ، راجع الوثائق.

لحسن الحظ ، إنه لا يعمل فقط في جميع المتصفحات الحديثة ، ولكن أيضًا في بعض المتصفحات القديمة مثل "IE 8+".

أخيرًا ، قد ترغب في إلقاء نظرة على إصدار WordPress.

الابتداء مع "slick.js"

لبدء استخدام البقعة ، ابدأ بتنزيل الملفات التالية وتثبيتها في مشروعك:

jQuery (≥1.7)
slick.css او النسخة المبسطة
slick.js او النسخة المبسطة

اختياريًا ، قد ترغب في استيراد ملف slick-theme.css.

يمكنك الحصول على نسخة من ملفات "slick" عن طريق زيارة موقع Github repo ، باستخدام مدير الحزم (مثل npm) ، أو عن طريق تحميل الأصول الضرورية من خلال CDN (مثل cdnjs). في هذا البرنامج التعليمي ، سأختار الخيار الأخير.

بالإضافة إلى ذلك ، أدرجت Babel لتجميع رمز ES6 إلى ES5 و Lodash للاستفادة من وظيفة debounce (سنستخدم ذلك لاحقًا).

مع وضع ذلك في الاعتبار ، إذا نظرت أسفل علامة التبويب الإعدادات في القلم التجريبي ، فسترى أنني قد ضمّنت ملف CSS خارجيًا واحدًا وثلاثة ملفات جافا سكريبت خارجية.

CSS settings on CodePen — اعدادات CSS على CodePen

JavaScript settings on CodePen — اعدادات Js على CodePen

الHTML

من المهم في هذه المرحلة فهم بنية صفحتنا. والأهم من ذلك ، أننا سنحدد نوعين من دوارات تحمل الصور نفسها وتتم مزامنتها (سنناقش كيفية ذلك لاحقًا). أبعاد الصورة هي 860 × 550 بكسل ، على الرغم من أنها قد تكون مختلفة في مشاريعك الخاصة.

أخيرًا ، كجزء من الرف الدائري الثاني ، سنحدد أسهم التنقل بالإضافة إلى عنصر يتتبع إجمالي عدد الشرائح.

إليك الهيكل المطلوب لصفحتنا التجريبية:

<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">
  
    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
    </div><!--/left-->
    
    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--svg here-->
        </button>
        <button class="arrow-right">
          <!--svg here-->
        </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div><!--/right-->
    
  </div>
</div>

الCSS

في المجمل ، يجب أن يكون معرضنا يحتوي على أربعة مظاهر مختلفة ، حسب منفذ العرض المتاح. دعنا نتخيلها باتباع نهج الجوّال أولاً.

عندما تكون نافذة المتصفح أقل من 480 بكسل ، يجب أن تبدو مثل هذا ، مع ظهور الرف الدائري الثاني والتنقل فقط:

The carousel layout on extra small screens — تصميم Carousel على الشاشات الصغيرة الإضافية

بعد ذلك ، على الشاشات بين 480 بكسل و 768 بكسل ، يجب أن تكون على النحو التالي ، مع صورتين مصغرتين أسفل الشريحة الرئيسية:

The carousel layout on small screens — تصميم Carousel على الشاشات الصغيرة الإضافية

بعد ذلك ، على الشاشات بين 769 بكسل و 1023 بكسل ، سنقدم صورة مصغرة ثالثة:

أخيرًا ، على الشاشات الكبيرة (≥1024 بكسل) ، يجب أن يكون على النحو التالي ، مع ظهور الصور المصغرة للجانب (لاحظ أنها لا تتناسب تمامًا مع هذه الصورة بالكامل):

The carousel layout on large screens — تصميم Carousel على الشاشات الصغيرة الإضافية

يتم تلبية جميع الحالات المذكورة أعلاه في استعلامات الوسائط الموضحة أدناه:

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

لاحظ أن هناك قاعدة مهمة !. هذه الكتابة فوق نمط سطري مضمنة.

الJavaScript

دعنا الآن ننتقل إلى الأشياء المتعلقة بـ JavaScript

مختصرات التخزين المؤقت Caching Selectors

عندما يكون "DOM" جاهزًا ، كممارسة جيدة ، نقوم بتخزين بعض المحددات الشائعة الاستخدام:

1	const $left = $(".left");
2	const $gl = $(".gallery");
3	const $gl2 = $(".gallery2");
4	const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

تهيئة الCarousels

ثم ، نقوم بتهيئة ومزامنة دوارتنا. رمز المسؤول عن هذا السلوك كما يلي:

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

لا شك أن أفضل طريقة لفهم كيفية عمل هذا الكود هي قراءة وثائق slick ومع ذلك ، اسمحوا لي أن أشرح شيئين هامين هنا:

يتيح لنا خيار التكوين asNavFor مزامنة الدارات الدوارة واستخدام أحدها كnavigation للآخر.
بشكل افتراضي ، يستخدم برنامج Slick تحويلات CSS. في حالتنا على الرغم من ذلك ، نقوم بتعطيلها عن طريق تحديد UseTransform: false. هذا لأنهم يسببون وميضًا صغيرًا في الشريحة الأولى من الcarousel الأول على الشاشات الكبيرة (كان من الممكن أن نعطلهم فقط في الcarousel الأول).

عرض وتخصيص تخطيط المعرض

يجب ألا يكون معرضنا مرئيًا إلا عندما تكون جميع أصول الصفحة جاهزة. في البداية ، تظهر أداة التحميل المسبق الاختيارية - يمكنك الرجوع إلى الترميز مرة أخرى ، يبدو كالتالي:

1	<div class="loading">Carousel is loading...</div>

في هذه المرحلة ، يتعين علينا التفكير مرة أخرى في تصميم المعرض المطلوب على الشاشات الكبيرة. إذا نظرت مرة أخرى إلى لقطات الشاشة المقابلة ، فستلاحظ أن كلاً من ال carousels لها نفس الارتفاع. من أجل تحقيق هذا السلوك المطلوب ، يتعين علينا كتابة بعض شفرات جافا سكريبت المخصصة (ما وراء CSS). سيقوم هذا الرمز بتعيين ارتفاع لcarousel الأول بشكل حيوي يساوي ارتفاع الثاني (أو العكس).

عند معرفة المتطلبات أعلاه ، إليك الشفرة التي يتم تشغيلها عندما تكون الصفحة بأكملها جاهزة:

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

وإليك تعريف وظيفة handleCarouselsHeight

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2)").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

عندما يتم تحميل الصفحة ، يعمل المعرض جيدًا. ولكن يجب أن تعمل أيضًا كما هو متوقع عندما يتم تغيير حجم نافذة المتصفح.

يظهر الرمز الذي يتعامل مع هذا الموقف بالتحديد أدناه:

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
  }, 200)
);

لاحظ أن معالج الحدث يتم تغليفه داخل وظيفة debounce. هذه وظيفة "Lodash" التي تساعدنا على تقييد مقدار المرات التي يتم فيها استدعاء هذا المعالج.

العمل مع الأحداث وطرق slick

الآن بعد أن نجحنا في تنفيذ الوظيفة الرئيسية لمعرضنا ، دعنا نذهب خطوة أبعد ونبني بضعة أشياء اختيارية.

أولاً ، في الزاوية العلوية اليمنى من الcarousel الثاني ، نعرض الشريحة الحالية والعدد الإجمالي للشرائح.

Displaying the current slide and the total number of slides — عرض الشريحة الحالية والعدد الإجمالي للشرائح

لتحقيق ذلك ، نستفيد من أحداث init وبعد afterChange.

ليك الشفرة ذات الصلة:

/*you have to bind init event before slick's initialization (see demo) */
gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

كإجراء تحسين إضافي ، في كل مرة ننقر فيها على شريحة من الcarousel الاول,يجب أن تكون الشريحة المقترنة من الcarousel, الثاني نشطة. بفضل طريقة slickGoTo من slick ، يمكننا تطوير هذه الوظيفة.

إليك الشفرة ذات الصلة:

1	$(".gallery .item").on("click", function() {
2	const index = $(this).attr("data-slick-index");
3	$gl2.slick("slickGoTo", index);
4	});

4. دعم المتصفح

يجب أن يعمل العرض التوضيحي بشكل جيد في جميع المتصفحات الحديثة ويمكنك استخدامه بأمان في مشاريعك.

لم أواجه سوى خطأ واحد صغير في بعض المتصفحات (Firefox و Edge) أثناء اختبار العرض التوضيحي على الشاشات الكبيرة. عندما تنقر على أسهم التنقل ، تفشل جميع الشرائح في أول carousel بعيدًا عن الأولى ، في الوصول إلى الحافة العليا لوالدهم وترك فجوة بكسل واحدة:

Slick leaves one pixel bug on some browsers — Slick’s one pixel bug on some browsers

وأخيرًا وليس آخرًا ، قد يلزم إدخال تحسينات وتخصيصات صغيرة عند تغيير حجم النافذة ، اعتمادًا على احتياجاتك.

الاستنتاج !

في هذا البرنامج التعليمي ، استفدنا من "slick.js" وتمكننا من إنشاء معرض سريع الاستجابة. نأمل الآن ، أنت على استعداد لتجربة هذا التنفيذ في مشاريعك الخاصة. إذا حدث ذلك ، فلا تتردد في مشاركة رابط مشروعك في التعليقات أدناه!