آموزش کتابخانه Swiper در ری اکت برای ساخت اسلایدر تصاویر حرفه ای !

16 آذر 1402
ارسال شده توسط
ری اکت
کتابخانه Swiper - کتابخانه Swiperjs - کتابخانه Swiper در ری اکت - کتابخانه Swiper در ریکت - کتابخانه Swiper در React

کتابخانه Swiper در ری اکت در زمینه ساخت اسلایدر های حرفه ای و زیبا به ما کمک میکنه. اگه تو اپیکیشن خودمون به اسلایدر حرفه ای، زیبا و بهینه نیاز داریم، میتونیم از کتابخانه Swiper در React کمک بگیریم 🙂

با فِرانت اِندی همراه باشید تا ببینیم کتابخانه Swiper در ریکت دقیقا چیه و چه کمکی به ما میکنه …

بیش از 2 میلیون دانلود هفتگی در npm !

کتابخانه Swiper در ری اکت چیست ؟

کتابخانه Swiper در ری اکت ، یکی از محبوبترین کتابخانه های جاوااسکریپتی در زمینه ایجاد اسلایدر تصاویر زیبا و بهینه هست که از محبوبیت و جامعه آماری بالایی برخورداره!

میشه گفت که کتابخانه Swiper یکی از شناخته شده ترین کتابخانه ها در زمینه ایجاد اسلایدر تصاویر زیبا و حرفه ای هست.

اگه قصد ایجاد اسلایدر در کتابخانه ری اکت داشته باشیم، Swiper میتونه اولین گزینه ما باشه!

کتابخانه Swiper - کتابخانه Swiperjs - کتابخانه Swiper در ری اکت - کتابخانه Swiper در ریکت - کتابخانه Swiper در React

نصب کتابخانه Swiper در ری اکت

قبل از اینکه بخوایم کتابخانه Swiper رو نصب کنیم، باید یک پروژه ری اکتی داشته باشیم.

برای نصب کتابخانه Swiper در React میتونیم از دستور زیر در ترمینال استفاده کنیم تا این کتابخانه روی پروژه فعلی ما نصب بشه :

				
					npm i swiper

خب 🙂 حالا کتابخانه Swiper برای ما نصب شده و میتونیم ازش برای ساخت اسلایدر تصاویر حرفه ای، بهینه و زیبا استفاده کنیم.

ساخت اسلایدر تصاویر ساده با کتابخانه Swiper در ریکت

قبل از اینکه بریم سراغ اسلایدر های حرفه ای و پیچیده، بیاید یک اسلایدر ساده بسازیم.

تو تیکه کد زیر من یک کامپوننت به نام SampleSlider ساختم :

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

تو خط 1 کامپوننت بالا من از کامپوننت Swiper و SwiperSlide استفاده کردم ( از کامپوننت های خود Swiper هستن )

تو خط 2 یک فایل css فراخوانی کردم که مرتبط با خود Swiper هست و Style های Swiper رو به کامپوننت اضافه میکنه.

تو خط  3 من یک فایل css به کامپوننت خودم اضافه کردم و استایل های دلخواه خودم رو داخلش نوشتم، این فایل رو میتونیم تو تیکه کد زیر ببینیم :

				
					.sample-slider {
    width: 70%;
}
.sample-slider img {
    width: 100%;
}

خروجی 2 فایل بالا، اسلایدر ساده ی زیر هست که شامل 3 تصویر هست و بصورت اسلایدر تصاویر نمایش داده میشه ( البته من خروجی زیر رو بصورت تصویر بهتون نمایش دادم و قابل جابجایی نیست ) :

swiper sample 1

ساخت اسلایدر تصاویر به همراه ویژگی Navigation ( آیکن چپ و راست )

حتما اسلایدر تصویر هایی که آیکن های Navigation دارن رو دیدیم، ما به کمک کتابخانه Swiper در ری اکت میتونیم از این اسلایدر ها بسازیم.

برای اینکه ویژگی Navigation رو به اسلایدر خودمون اضافه کنیم، باید 4 تا کار زیر رو انجام بدیم :

  • ماژول Navigation رو فراخوانی کنیم.
  • استایل Navigation رو فراخوانی کنیم.
  • ویژگی Navigation رو به اسلایدر خودمون اضافه کنیم.
  • ماژول Navigation رو به اسلایدر خودمون اضافه کنیم.

تو تیکه کد زیر، 4 مرحله بالارو انجام دادیم تا Navigation به اسلایدر خودمون اضافه بشه:

 

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper' 
import 'swiper/css/navigation'          
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"   
            modules={[Navigation]}      
            navigation                  
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

تو تصویر زیر میشه خروجی رو دید که آیکن های ناوبری ( چپ و راست ) به اسلایدر اضافه شده :

افزودن Pagination به اسلایدر در کتابخانه Swiper در ریکت

حتما اون نقطه های گرد پایین اسلایدر رو دیدیم که نشون میدن موقعیت فعلی ما در اسلایدر کجاست! به این نقطه ها Pagination میگیم.

درواقع Pagination زمانی کاربرد داره که اسلایدر ما چندین تصویر داره.

این ویژگی کمک میکنه که کاربر بدونه که داره تصویر چندم رو نگاه میکنه..

برای اضافه کردن Pagination به اسلایدر خودمون در کتابخانه Swiper باید 4 مرحله زیر رو انجام بدیم :

  • ماژول Pagination رو فراخوانی کنیم.
  • فایل استایل Pagination رو فراخوانی کنیم.
  • ماژول Pagination رو به اسلایدر خودمون اضافه کنیم.
  • استایل Pagination رو به اسلایدر خودمون اضافه کنیم.

تو تیکه کد زیر، این 4 تا کار رو انجام دادیم تا Pagination رو به اسلایدر خودمون در کتابخانه Swiper اضافه کنیم :

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination } from 'swiper'     
import 'swiper/css/navigation'
import 'swiper/css/pagination'                      
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination]}      
            navigation
            pagination                              
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

همونطور که تو تصویر زیر میشه دید، Navigation به اسلایدر ما اضافه شده :

ساخت چرخه بینهایت برای اسلایدر ( Loop )

ما میتونیم برای اسلایدر خودمون یک چرخه بینهایت ایجاد کنیم. ( loop )

در واقع loop به این معنی هست که پس از نمایش آخرین تصویر اسلایدر، دوباره تصویر اول نمایش داده میشه و هیچوقت اسلایدر ما تموم نمیشه.

فعالسازی loop در کتابخانه Swiper در ری اکت خیلی آسونه. فقط کافیه ویژگی loop={true} رو به اسلایدر خودمون اضافه کنیم :

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination } from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination]}
            navigation
            pagination
            loop={true}     
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

اگه loop={true} رو به اسلایدر خودمون اضافه کنیم، اسلایدر ما هیچوقت تموم نمیشه و همیشه تصاویر ما درحال جابجایی هستن.

تو حالت عادی اگه به آخرین تصویر اسلایدر برسیم، دکمه < غیرفعال میشه چون این دکمه فقط برای رفتن به تصویر بعدی هست.

اما اگه loop رو فعال کنیم، این دکمه هیچوقت غیرفعال نمیشه و همیشه میتونیم به تصویر بعدی بریم.

 

پخش خودکار اسلایدر ( autoPlay )

یکی از رایج ترین ویژگی هایی که هر اسلایدر میتونه داشته باشه، ویژگی autoplay هست. ویژگی autoplay کمک میکنه که تصاویر اسلایدر ما بصورت خودکار جابجا بشه و تمامی تصویر های اون اسلایدر نمایش داده بشه ( بدون نیاز به کلیک کاربر روی دکمه بعدی )

برای فعالسازی ویژگی autoplay در اسلایدر ها ما باید کار های زیر رو انجام بدیم :

  • ماژول autoplay رو فراخوانی کنیم.
  • ماژول autoplay رو به اسلایدر خودمون اضافه کنیم.
  • ویژگی autoplay رو داخل اسلایدر تنظیم کنیم ( باید delay رو هم تنظیم کنیم )

تنظیم کردن delay مشخص میکنه که فاصله پخش خودکار بین هر تصویر تا تصویر بعدی چند میلی ثانیه باشه.

تو تیکه کد زیر ما ویژگی autoplay رو به اسلایدر خودمون اضافه کردیم و مقدار delay رو 2 ثانیه تنظیم کردیم:

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper'    
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination, Autoplay]}    
            navigation
            pagination
            loop={true}
            autoplay={{ delay:2000 }}                       
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

با فعالسازی ویژگی autoplay ، تصاویر اسلایدر ما بصورت خودکار جابجا میشن و نیازی به کلیک کاربر روی گزینه بعدی نیست! هرچند کاربر امکان کلیک روی آیکن بعدی و قبلی رو هنوز هم داره.

سورس نهایی ( اسلایدر کامل ما )

تا به اینجای کار تونستیم به کمک کتابخانه Swiper در React یک اسلایدر حرفه ای بسازیم.

تو تیکه کد زیر، میتونیم اسلایدر کامل خودمون رو ببینیم که تمامی ویژگی های بالا رو داره :

				
					import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination, Autoplay]}
            navigation
            pagination
            loop={true}
            autoplay={{ delay:2000 }}
        >
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample1.png" /><noscript><img decoding="async" src="/img/sample1.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample2.png" /><noscript><img decoding="async" src="/img/sample2.png" /></noscript></SwiperSlide>
            <SwiperSlide><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/img/sample3.png" /><noscript><img decoding="async" src="/img/sample3.png" /></noscript></SwiperSlide>
        </Swiper>
    )
}

و فایل css ما بصورت زیر هست :

				
					.sample-slider {
    width: 70%;
}
.sample-slider img {
    width: 100%;
}

و تمام 🙂

ما به همین راحتی تونستیم از کتابخانه Swiper در React استفاده کنیم.

جمع بندی

کتابخانه Swiper در ریکت یکی از بهترین و محبوب ترین کتابخانه های ایجاد اسلایدر های حرفه ای، بهینه و زیبا هست که جامعه آماری خیلی خیلی خوبی داره ( 2 میلیون دانلود هفتگی ).

همچنین کتابخانه swiperjs از تایپ اسکریپت پشتیبانی میکنه پس اگه پروژه تایپ اسکریپتی دارید، نگران این موضوع نباشید.

 

کتابخانه Swiper یک کتابخانه جاوااسکریپتی هست که به ما در زمینه ساخت اسلایدر های حرفه ای، زیبا و بهینه کمک میکنه.

بله 100%

ما میتونیم از کتابخانه Swiper در React هم استفاده کنیم. ( تو این مقاله نحوه استفاده از کتابخانه Swiper در ریکت مطرح شده )

سوالات متداول فِرانت اِندی
درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام ممنون بخاطر اموزش خوب و کاملتون
    من میخوام از n تا اسلایدر فقط 3 تای اولی رو تو اسلایدر نمایش بدم. برای این چیکار باید بکنم؟

    پاسخ

    • سلام رفیق خواهش میکنم 🙂
      اولین کاری که میتونی بکنی استفاده از slidersPreview هست. یعنی بصورت زیر :


      import { Swiper, SwiperSlide } from 'swiper/react';
      import 'swiper/css';

      const MySwiperComponent = () => {
      return (

      {mySlides.map((slide, index) => (

      {/* Your slide content here */}

      ))}

      );
      };

      روش دوم استفاده از متد slice هست :

      import { Swiper, SwiperSlide } from 'swiper/react';
      import 'swiper/css';

      const MySwiperComponent = () => {
      const mySlides = [
      // Your slides data here
      ];

      // Only pass the first 3 slides to the Swiper component
      const firstThreeSlides = mySlides.slice(0, 3);

      return (

      {firstThreeSlides.map((slide, index) => (

      {/* Your slide content here */}

      ))}

      );
      };

      پاسخ

دیدگاهتان را بنویسید