ماهي المكتبة swiper js

Zen Eddin Allaham · 8 يوليو

import React,{useRef , useState} from 'react';
import {Swiper , SwiperSlide} from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import {Pagination} from 'swiper/modules';
const HeroSlider = () => {
  return (
    <section>
     <Swiper pagination={true} modules={[Pagination]} className='mySwiper'>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
     </Swiper>
    </section>
  )
}

export default HeroSlider

ماهو SwiperSlide & Swiper & Pagination & modules

Mustafa Suleiman · 8 يوليو

مكتبة جافاسكريبت خاصة بإنشاء عروض شرائح أي الـ sliders والشرائح الدوارة carousels بشكل تفاعلي ومتجاوبة، وتم تصميمها بشكل أساسي لتوفير أفضل تجربة على الأجهزة التي تعمل باللمس مالهواتف الذكية والأجهزة اللوحية.

وهي مستخدمة في غالبية المواقع تقريبًا، لكونها خفيفة وبدون تبعيات، بمعنى أنها لا تعتمد على مكتبات أخرى مثل jQuery، وذلك يجعلها سريعة وخفيفة على أداء الموقع.

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

وباستطاعتك تعديل كل جانب من جوانب الـ Slider تقريبًا عبر الـ API الخاصة بها أو من خلال CSS.

ستجد أمثلة هنا:

https://swiperjs.com/demos

Zen Eddin Allaham · 8 يوليو

            <Swiper autoplay={{delay:2500,disableOnInteraction: false,}} pagination={true} modules={[Pagination, Autoplay]} className='mySwiper'>

هل يمكن شرح هذا الكود

عبدالباسط ابراهيم · 8 يوليو

بتاريخ 1 ساعة قال Hxfhf Ucicic:
            <Swiper autoplay={{delay:2500,disableOnInteraction: false,}} pagination={true} modules={[Pagination, Autoplay]} className='mySwiper'>
هل يمكن شرح هذا الكود

هذا السطر يعرف مكون Swiper مع خصائص autoplay و pagination، بالإضافة إلى وحدتين في modules.

أولاً خاصية Autoplay

autoplay={{delay:2500,disableOnInteraction: false,}}

السطر السابق يفعل خاصية التشغيل التلقائي للعرض

delay: 2500 و هذا الرقم يحدد المدة الزمنية بالميلي ثانية بين كل انتقال تلقائي. الرقم 2500 يعني أن كل شريحة ستُعرض لمدة 2.5 ثانية قبل الانتقال للشريحة التالية تلقائياً.

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

ثانياً وحدات النظام (Modules) بها

Pagination والتي تظهر في أسفل العرض وتشير للشريحة الحالية

Autoplay وحدة التشغيل التلقائي التي تفعل الانتقال التلقائي بين الشرائح

ماهي المكتبة swiper js

السؤال

Zen Eddin Allaham

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Zen Eddin Allaham

عبدالباسط ابراهيم

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية