Framework7 - Swiper Slider

Sự miêu tả

Thanh trượt swiper là thanh trượt cảm ứng mạnh mẽ và hiện đại nhất và có trong Framework7 với rất nhiều tính năng.

Bố cục HTML sau đây hiển thị thanh trượt xoay -

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <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>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Các lớp sau được sử dụng cho thanh trượt swiper:

swiper-container - Nó là một phần tử bắt buộc cho vùng chứa thanh trượt chính và nó được sử dụng cho các trang trình bày và phân trang.
Swiper-wrapper - Nó là một yếu tố bắt buộc cho các slide trình bao bọc bổ sung.
swiper-slide - Nó là một phần tử slide duy nhất và nó có thể chứa bất kỳ HTML nào bên trong.
swiper-pagination - Nó là tùy chọn cho các dấu đầu dòng phân trang và chúng được tạo tự động.

Bạn có thể khởi tạo swiper bằng JavaScript bằng các phương pháp liên quan của nó -

myApp.swiper(swiperContainer,parameters)

HOẶC LÀ

new Swiper(swiperContainer, parameters)

Cả hai phương pháp đều được sử dụng để khởi tạo thanh trượt với các tùy chọn.

Các phương thức đã cho ở trên chứa các tham số sau:

swiperContainer- Nó là HTMLElement hoặc chuỗi của một thùng chứa swiper và nó là bắt buộc.
parameters - Đây là các phần tử tùy chọn chứa đối tượng với các tham số swiper.

Ví dụ -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Có thể truy cập thể hiện của swiper và thuộc tính swiper của vùng chứa của thanh trượt có phần tử HTML sau:

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Bạn có thể xem các cách và kiểu swiper khác nhau trong bảng sau:

S. không	Các loại & Mô tả Swiper
1	Swiper mặc định có phân trang Nó là một thanh trượt cảm ứng hiện đại và thanh trượt vuốt theo chiều ngang, theo mặc định.
2	Swiper dọc Cái này cũng hoạt động như một swiper mặc định nhưng nó vuốt dọc.
3	Có khoảng trống giữa các trang trình bày Swiper này được sử dụng để tạo khoảng trống giữa hai slide.
4	Nhiều Swipers Swiper này sử dụng nhiều hơn một swipers trên một trang.
5	Swipers lồng nhau Nó là sự kết hợp của các slide dọc và ngang.
6	Kiểm soát tùy chỉnh Nó được sử dụng cho các điều khiển tùy chỉnh để chọn hoặc vuốt bất kỳ trang chiếu nào.
7	Đang tải chậm Nó có thể được sử dụng cho tập tin đa phương tiện, cần thời gian để tải.