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

منذ 5 سنوات imadbelasri Reactjs
RS

فهاد الدرس الرابع عشر من دورة 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;
}
                                                        
                                                    

دروس ذات صلة

RS

دورة react js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت...


RS

دورة react js للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les foncti...


RS

دورة react js للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف E...


RS

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

فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet...


RS

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

فهاد الدرس الخامس من دورة react js غادي نشوفوا كيفاش نزيدو component آخر ومنبعد غادي نشوفوا كيفاش نع...


RS

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

فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات...


RS

دورة REACT JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو مجموعة ديال الاخبار ف state ومن...


RS

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

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالد...


RS

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

فهاد الدرس الحادي عشر من دورة react js للمبتدئين غادي نشوفوا كيفاش نستعملوا axios باش نسترجعوا les a...


RS

دورة REACT JS للمبتدئين الدرس الثاني عشر

فهاد الدرس الثاني عشر من دورة  react js للمبتدئين غادي نشوفوا حاجة مهمة ف react js هي routes لي كيمك...