دورة react js للمبتدئين الدرس الخامس عشر
1- تحميل وتثبيت react-slick
//
<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 فالملف الرئيسي
//
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
//
.container{
padding-right: 15px;
padding-left: 15px;
margin-left : auto;
margin-right: auto;
}