Swiper.js Простая и быстрая реализация Карусели Слайд (совместимая сторона PC, мобильный терминал)

JavaScript
Swiper.js Простая и быстрая реализация Карусели Слайд (совместимая сторона PC, мобильный терминал)

swiper — это бесплатная и легкая карусельная скользящая js-инфраструктура, подходящая для ПК и мобильных устройств, официальный адрес: (https://www.swiper.com.cn/)

Демонстрация эффекта:

Сторона ПК:


Мобильный терминал (переключите устройство на мобильный телефон в браузере, здесь переключитесь на iphone), swiper поддерживает сенсорное скольжение влево и вправо на мобильном терминале


Часть кода (копировать и вставлять можно напрямую):

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Swiper.js简单快速实现轮播滑动（兼容PC端、移动端）</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
 6 
 7 <!-- 下面加载Swiper的css跟js文件。可以将文件下载到项目中加载，也可以通过cdn远程加载，这里使用的是cdn远程加载 -->
 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css"><!-- 加载Swiper的css文件 -->
 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script><!-- 加载Swiper的js文件 -->
10 </head>
11 <body>
12     <div style="height: 200px;" class="swiper-container">
13         <div class="swiper-wrapper">
14             <!-- 下面是4个不同颜色的轮播滑块 -->
15             <div style="background-color: red;" class="swiper-slide">slider1</div>
16             <div style="background-color: green;" class="swiper-slide">slider2</div>
17             <div style="background-color: yellow;" class="swiper-slide">slider3</div>
18             <div style="background-color: blue;" class="swiper-slide">slider4</div>
19         </div>
20         <div class="swiper-button-prev"></div><!--左箭头-->
21         <div class="swiper-button-next"></div><!--右箭头-->
22         <div class="swiper-pagination"></div><!--分页器（就是4个点点）-->
23     </div>
24 </body>
25 </html>
26 <script>
27   var mySwiper = new Swiper('.swiper-container', {//初始化Swiper
28    autoplay: {//自动切换
29       delay: 3000,
30       stopOnLastSlide: false,
31       disableOnInteraction: false,
32     },
33    navigation: {//前进后退
34       nextEl: '.swiper-button-next',
35       prevEl: '.swiper-button-prev',
36     },
37    pagination: {//分页器
38       el: '.swiper-pagination',
39       clickable :true,
40    },
41    loop : true,//循环
42  })
43 </script>


Инструкции:

1. Сначала вам нужно загрузить головку плагина, нужно использовать файл с файлами swiper.css и swiper.js. Swiper может загрузить файл с помощью CDN или удаленной загрузки

<head>
<!-- 这里使用的是cdn远程加载Swiper4的版本 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
</head>

Адрес загрузки файла Swiper4:

https://www.swiper.com.cn/download/index.html

Адрес удаленной загрузки CDN swiper4:

https://www.swiper.com.cn/cdn/index.html


2. HTML-контент

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
    </div>
</div>

Приведенный выше HTML-контент является фиксированным шаблоном.Если вам нужно добавить другие компоненты, такие как стрелки влево и вправо или пейджеры, вы можете обратиться к официальной документации swiper4: https://www.swiper.com.cn/api/index. .html


3. Инициализировать Swiper

<script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay:true,//等同于以下设置
      /*autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        },*/
    });
</script>

Если вам нужно добавить другие параметры конфигурации в js, вы можете обратиться к официальной документации swiper4:

https://www.swiper.com.cn/api/index.html


Заключение:

В реальной веб-разработке всегда необходимо быть совместимым с ПК и мобильными терминалами.Если вы используете нативный js, чтобы написать его самостоятельно, это не только отнимает много времени, но также может иметь плохую совместимость и стабильность, особенно для сенсорных событий на мобильный терминал. При использовании swiper вам не нужно учитывать совместимость.Если вы знакомы с его API, вы можете быстро реализовать функции веб-страниц мобильного телефона и компьютера, карту фокуса, вкладку, сенсорную навигацию и другие функции.


наконец

Если вы считаете, что статья хорошая, подпишитесь на меня и поставьте лайк!

Если у вас есть какие-либо вопросы по поводу статьи или вы хотите пообщаться по техническим вопросам, вы можете подписаться на общедоступную учетную запись [GitWeb], чтобы исследовать и учиться вместе со мной!


Категории