ایجاد اسلایدر در ری اکت جی اس

آموزش ایجاد اسلایدر در ری اکت جی اس

در ابتدا باید پکیج زیر را در پروژه نصب نمایید

npm install react-slick --save

سپس باید این پکیج را در پروژه مورد نظر ایمپورت کنید تا بتونید از اون استفاده کنید

import React from "react";

import Slider from "react-slick";

حال به نمونه کد زیر توجه کنید

import React from "react";

import ReactDOM from "react-dom";

import Slider from "react-slick";

import "./index.css";

class ReactSlickDemo extends React.Component {

render() {

var settings = {

dots: true,

infinite: true,

speed: 1000,

slidesToShow: 1,

slidesToScroll: 1

};

return (

<div className="container">

<Slider {...settings}>

<div>

<img src="http://placekitten.com/g/400/200" />

</div>

<div>

<img src="http://placekitten.com/g/400/200" />

</div>

<div>

<img src="http://placekitten.com/g/400/200" />

</div>

<div>

<img src="http://placekitten.com/g/400/200" />

</div>

</Slider>

</div>

);

}

}

ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));

همونطور که مشاهده میکنید یک نمونه کد کامل از ایجاد اسلایدر رو براتون قرار دادم .

اما نیاز میبینم تنظیماتی که در کد ایجاد شده رو براتون توضیح بدم

dots

نقطه زیر اسلایدر رو فعال میکنه

infinite

اگر عکسها به آخر برسه مجدد به عکس اول بر میگردد و اگر false باشد وقتی به عکس آخر برسد دکمه "بعدی" یا "قبلی" غیرفعال می شود

speed

سرعت حرکت بین عکسها رو بر اساس میلی ثانیه تعیین میکند

slidesToShow

تعداد عکس در یک اسلاید رو نمایش میدهد اگر 2 باشد دوتا عکس را در یک اسلاید نمایش می دهد

slidesToScroll

میزان حرکت بین اسلایدر ها را نمایش می دهد برای مثال اگر 2 باشد بصورت یکی در میان عکسها را نمایش می دهد

اما برای ایجاد اسلاید از یک کامپوننت به اسم Sliderاستفاده میکنیم که با توجه به تنظیمات یک متغییر تعریف میکنیم و بعنوان پارامتر به کامپوننت می دهیم.

برای آموزش های برنامه نویسی بصورت رایگان پیج مارو در اینستاگرام دنبال نمایید

@mr.engineer404