Cài đặt swiper
Lượt xem: 24103
Cài đặt Swiper
Swiper slider là một thư viện chạy slider trên web khá hay và đơn giản. Vậy làm sao để sử dụng Swiper slider vào website của bạn?
1. Download và cài đặt Swiper
- Trước tiên chúng ta cần tải các tệp Swiper cần thiết. Chúng ta có thể tải Swiper tại kho lưu trữ Swiper GitHub https://github.com/nolimits4web/Swiper/tree/master/package
- Hoặc cài đặt Swiper qua NPM như sau:
$ npm install swiper
- Bạn có thể sử dụng Swiper từ CDN:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"> </script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
2. Nhúng Swiper vào website:
- Chúng ta cần đưa các tệp tin css và js của Swiper vào website của chúng ta:
<!DOCTYPE html >
<html lang="en" >
<head >
...
<link rel="stylesheet" href="[duong-dan]/swiper.min.css" >
</head >
<body >
...
<script src="[duong-dan]/swiper.min.js" ></script >
</body>
</html>
3. Thêm cấu trúc HTML của Swiper
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
4. Css giới hạn kích thước của Swiper
- Nếu bạn muốn giới hạn kích thước của Swiper bạn có thể sử dụng đoạn css trong css của mình:
.swiper-container {
width: 600px;
height: 300px;
}
5. Khởi tạo Swiper
- Cuối cùng, chúng ta cần khởi tạo Swiper trong js. Lựa chọn tốt nhất là khởi tạo Swiper trong đoạn script trước thẻ đóng của body ()
<body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
- Nếu bạn sử dụng jQuery / Zepto trong trang web của mình, thì bạn có thể khởi tạo nó trong bất kỳ tệp JS nào của mình, nhưng hãy đảm bảo rằng bạn làm điều đó trong sự kiện document.ready:
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true
})
});
- Ngoài ra bạn có thể sử dụng Swiper trong sự kiện window.onload (Tuy nhiên cách này không nên dùng)
window.onload = function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true
})
};