دورة react js للمبتدئين الدرس الخامس عشر


فهاد الدرس الرابع عشر من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا كيفاش نزيدو slider باستعمال react-slick لي هو package كيمكنا من إضافة slider بطريقة سهلة.


1- تحميل وتثبيت react-slick

فأول حاجة زيد projet جديد سميه react-slider من بعد كيف العادة حيد داكشي لي ف src وخلي غير index.js.

منبعد غادي نزيدو react-slick فتح cmd وزيد هاد ل commande :

npm install react-slick --save

منبعد ميتزاد خص نزيد ملفات css الخاصة بهاد ل package فغادي تمشي ل public فالملف index.html غادي تزيد هاد السطرين فل head :

                                //
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
                            

2- إضافة slider فالملف الرئيسي

منبعد ف index.js غادي نسترجع Slider من react-slick وف render كنحدد les paramètres لي غادي ياخد فعندي :

- dots يعني النقاط لي كيكونوا فيه هنا عطينا true يعني يكونوا.
- infinite يعني ممحدودش.
- speed لي هي السرعة ولي هنا حددناها فنص ثانية.
- slideToShow عطيناها 1 يعني شحال من slide غادي يتعرض فواحد هو لي غادي يبان.
- slideToScroll عطيناها 1 يعني شحال من slide غادي يدوز فكل نصف ثانية.

منبعد ف return كنزيد Slider ونعطيه les paramètres لي غادي ياخذ ونزيد فوسطو les divs فمنبعد غادي نشوفوا كيفاش نزيدو التصاور.

فيلا درتي ل commande :

npm start

وفتحتي المتصفح غادي تلقى هاد النتيجة :




الكود لي زدنا ف index.js هو :


 

                                //
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Slider from "react-slick";

import './index.css';


class App extends Component{
    render(){
        var settings = {
            dots : true,
            infinite : true,
            speed : 500,
            slideToShow : 1,
            slideToScroll : 1
        }
        return(
            <div class="container">
                <Slider {...settings}>
                    <div>
                        <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque harum fuga quam recusandae. Eius labore esse quidem sapiente, odio exercitationem natus mollitia ipsa possimus porro doloremque ad, soluta eveniet! Vitae.</h3>
                    </div>
                    <div>
                        <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque harum fuga quam recusandae. Eius labore esse quidem sapiente, odio exercitationem natus mollitia ipsa possimus porro doloremque ad, soluta eveniet! Vitae.</h3>
                    </div>
                    <div>
                        <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque harum fuga quam recusandae. Eius labore esse quidem sapiente, odio exercitationem natus mollitia ipsa possimus porro doloremque ad, soluta eveniet! Vitae.</h3>
                    </div>
                </Slider>
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));
                            

3- إضافة style css ل index.js

فغادي تزيد ملف ف src سميه index.css كنزيد فيه هاد لكود :

                                //
.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-left : auto;
    margin-right: auto;
}