Вступление
В этой статье мы узнаем, как мы можем использовать Owl Carousel в приложении React. Карусель представляет собой слайд-шоу для езды на велосипеде серии изображений или видео.
Предпосылки
- Базовые знания React.js
- Visual Studio Code IDE
Создать проект ReactJS
Давайте сначала создадим приложение React, используя следующую команду:
JavaScript
xxxxxxxxxx
1
npx create-react-app matform
Откройте только что созданный проект в Visual Studio Code и установите загрузчик в этом проекте с помощью следующей команды:
Джава
xxxxxxxxxx
1
npm install --save bootstrap
Теперь откройте файл index.js и импортируйте Bootstrap:
Джава
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Вы также можете быть заинтересованы в:
React.js Essentials
Установите Сова Карусель
Теперь установите Owl Carousel с помощью следующей команды:
Джава
xxxxxxxxxx
1
npm install react-owl-carousel --save
Теперь откройте index.html, добавьте ссылку на jquery, добавьте следующую строку в заголовок
Джава
xxxxxxxxxx
1
<script src="https:code.jquery.com/jquery-3.4.1min.js"><script>
Теперь щелкните правой кнопкой мыши на общей папке. Добавьте новую папку ‘assets’, и под ней добавьте новую папку и переименуйте ее в ‘img’ и добавьте несколько демонстрационных изображений в эту папку:
Теперь перейдите в папку src и создайте новый компонент Owldemo1.js и добавьте следующую ссылку в этот компонент
Джава
xxxxxxxxxx
1
import OwlCarousel from 'react-owl-carousel';
2
import 'owl.carousel/dist/assets/owl.carousel.css';
3
import 'owl.carousel/dist/assets/owl.theme.default.css';
Добавьте следующий код в этот компонент.
Джава
xxxxxxxxxx
1
import React,{Component} from 'react';
2
import OwlCarousel from 'react-owl-carousel';
3
import 'owl.carousel/dist/assets/owl.carousel.css';
4
import 'owl.carousel/dist/assets/owl.theme.default.css';
5
import './owl.css';
6
export class Owldemo1 extends Component {
7
render()
8
{
9
return (
10
<div>
11
<div class='container-fluid' >
12
<div className="row title" style={{marginBottom: "20px"}} >
13
<div class="col-sm-12 btn btn-info">
14
Owl Carousel In React Application
15
</div>
16
</div>
17
</div>
18
<div class='container-fluid' >
19
<OwlCarousel items={3}
20
className="owl-theme"
21
loop
22
nav
23
margin={8} >
24
<div ><img className="img" src= {'assets/img/img1.jpg'}/></div>
25
<div><img className="img" src= {'assets/img/img2.jpg'}/></div>
26
<div><img className="img" src= {'assets/img/img4.jpg'}/></div>
27
<div><img className="img" src= {'assets/img/img3.jpg'}/></div>
28
<div><img className="img" src= {'assets/img/img5.jpg'}/></div>
29
<div><img className="img" src= {'assets/img/img6.jpg'}/></div>
30
<div><img className="img" src= {'assets/img/img7.jpg'}/></div>
31
</OwlCarousel>
32
</div>
33
34
</div>
35
)
36
}
37
}
38
39
40
export default Owldemo1
Теперь создайте файл CSS с именем owl.css и добавьте следующий CSS:
Джава
xxxxxxxxxx
1
.title
2
{
3
margin-bottom: 20px;
4
padding:20px
5
}
6
.img
7
{
8
height: 260px;width:100%
9
}
Импортируйте этот файл в компонент owldemo1.js.
Откройте файл app.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import Owldemo1 from './Owldemo1'
5
import OwlDemo from './Owldemo'
6
7
function App() {
8
return (
9
<div className="App">
10
<Owldemo1></Owldemo1>
11
</div>
12
);
13
}
14
15
export default App;
Запустите проект с помощью «npm start» и проверьте результат.
Теперь создайте еще один компонент с именем owldemo.js. В этом компоненте мы создаем автоматическую сову. Добавьте следующий код в этот компонент:
Джава
xxxxxxxxxx
1
import React,{Component} from 'react';
2
import OwlCarousel from 'react-owl-carousel';
3
import 'owl.carousel/dist/assets/owl.carousel.css';
4
import 'owl.carousel/dist/assets/owl.theme.default.css';
5
import './owl.css';
6
export class OwlDemo extends Component {
7
render()
8
{
9
return (
10
<div>
11
<div class='container-fluid' >
12
<div className="row title" style={{marginBottom: "20px"}} >
13
<div class="col-sm-12 btn btn-info">
14
Owl Carousel with Auto Play Property In React Application
15
</div>
16
</div>
17
</div>
18
<div class='container-fluid' >
19
<OwlCarousel items={3} margin={8} autoplay ={true} >
20
<div ><img className="img" src= {'assets/img/img1.jpg'}/></div>
21
<div><img className="img" src= {'assets/img/img2.jpg'}/></div>
22
<div><img className="img" src= {'assets/img/img4.jpg'}/></div>
23
<div><img className="img" src= {'assets/img/img3.jpg'}/></div>
24
<div><img className="img" src= {'assets/img/img5.jpg'}/></div>
25
<div><img className="img" src= {'assets/img/img6.jpg'}/></div>
26
<div><img className="img" src= {'assets/img/img7.jpg'}/></div>
27
</OwlCarousel>
28
</div>
29
</div>
30
)
31
}
32
}
33
34
35
export default OwlDemo
Запустите проект и убедитесь, что изображения автоматически скользят.
Резюме
В этой статье мы узнали, как реализовать карусель Owl в приложении ReactJS.