web@9416.cn

swiper插件,最现代的移动触摸滑块。

Swiper 移动端幻灯片 触摸滑动

50

5

2

Swiper - 是免费且最现代化的移动触摸滑块,具有硬件加速过渡和惊人的原生行为。它旨在用于移动网站,移动网络应用程序和以及PC端高版本的谷歌和IE浏览器。 Swiper它是一个现代触摸滑块,基本可以实现常用的所有滑动切换,自动幻灯片,tab选项卡,图片放大等效果。
代码说明

1.将Swiper文件包含到网站/应用程序中

之后我们需要将Swiper的CSS和JS文件包含到我们的网站/应用程序中。在你的html文件中:

<!DOCTYPE html><html lang="en"><head>
    ...    <link rel="stylesheet" href="path/to/swiper.min.css"></head><body>
    ...    <script src="path/to/swiper.min.js"></script></body></html>

2.添加Swiper HTML布局

现在,我们需要为我们的应用添加基本的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>

3. Swiper CSS样式/大小

之后,我们可能需要在CSS文件中设置Swiper大小:

.swiper-container {    width: 600px;    height: 300px;}

4.初始化Swiper

最后,我们需要在JS中初始化Swiper。有几个选项/地方可以做到:

  • 最佳选项将是内联脚本或包含在正文末尾的脚本文件中(在结束</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>


288
网友评论
© 2013一流科技 All Right Reserved.  沪ICP备1304233