Cài đặt Swiper - DANDEV

Trang chủ » Thư Viện Swiper » Cài đặt Swiper - DANDEV

Có thể bạn quan tâm

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 }) };

Từ khóa » Thư Viện Swiper