快捷導(dǎo)航

JS常用插件之Swiper插件實(shí)現(xiàn)輪播圖功能實(shí)例

更新時(shí)間：2024年07月09日 08:58:11 作者：斐波娜娜

項(xiàng)目中會(huì)多次使用到輪播圖組件,下面這篇文章主要給大家介紹了關(guān)于JS常用插件之Swiper插件實(shí)現(xiàn)輪播圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

Swiper介紹

Swiper 是一款免費(fèi)以及輕量級(jí)的移動(dòng)設(shè)備觸控滑塊的js框架

中文官網(wǎng)地址: https://www.swiper.com.cn/

點(diǎn)擊查看Swiper演示，里面的功能和樣式十分豐富，根據(jù)自己的需求選擇

中文教程中詳細(xì)介紹了如何使用Swiper

API文檔中介紹了各個(gè)模塊以及參數(shù)的詳細(xì)信息，遇到不明白的參數(shù)可以去查閱一下

比如說delay參數(shù)，它是自動(dòng)切換的時(shí)間間隔，如果覺得默認(rèn)的切換太慢了，可以修改這個(gè)參數(shù)

如果想修改其中的css樣式呢，我們可以自己寫一個(gè)css樣式把原先的給層疊掉

下載Swiper

里面有很多不同的版本，選擇自己需要的下載即可。

下載解壓后，swiper文件夾中的demo文件夾中就是我們Swiper演示中看到的各種各樣示例文件

如果說我想實(shí)現(xiàn)下面這個(gè)效果：分式（060）

首先點(diǎn)擊右上角的在新窗口打開然后在新窗口中右鍵點(diǎn)擊查看源代碼

源代碼中包含了html結(jié)構(gòu)，css樣式，js等等，待會(huì)會(huì)用到哦。

如何使用

1.引入插件相關(guān)文件。

首先查看剛才源代碼中引用了哪個(gè)css、js文件，以分頁（060）效果為例

然后在剛才下載好的swiper文件夾中找到swiper-bundle.min.css和swiper-bundle.min.js，復(fù)制到我們的項(xiàng)目中

在html中引入swiper-bundle.min.css和swiper-bundle.min.js

 <!-- 引入swipercss文件 -->
<link rel="stylesheet" href="css/swiper-bundle.min.css" rel="external nofollow"  />
<!-- 引入swiperjs文件 -->
<script src="js/swiper-bundle.min.js"></script>

2.按照規(guī)定語法使用

回到剛才源代碼文件，復(fù)制其中swiper結(jié)構(gòu)到自己代碼的輪播圖模塊中

注意一定不要更改其中的類名和結(jié)構(gòu)哦，如果更改了會(huì)導(dǎo)致很多css，js不起效果！

     <!-- 滑動(dòng)圖 -->
      <div class="slider">
        <!-- 下面這塊是復(fù)制的 -->
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-pagination"></div>
        </div>
      </div>

當(dāng)然Slide 1，Slide 2這些文本可以修改哦，修改成自己的圖片

<!-- 滑動(dòng)圖 -->
      <div class="slider">
        <!-- 下面這塊是復(fù)制的 -->
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="upload/banner.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="upload/banner1.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="upload/banner2.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="upload/banner3.dpg" alt="" />
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-pagination"></div>
        </div>

現(xiàn)在基本結(jié)構(gòu)已經(jīng)搭建好了，再把源代碼文件中的css樣式復(fù)制到自己的css文件中

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

把源代碼文件中的js代碼復(fù)制到自己的js文件中

<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

這樣就ok啦！

插件的使用總結(jié)

確認(rèn)插件實(shí)現(xiàn)的功能
去官網(wǎng)查看使用說明
下載插件
打開demo實(shí)例文件，查看需要引入的相關(guān)文件，并且引入
復(fù)制demo實(shí)例文件中的結(jié)構(gòu)html，樣式css以及js代碼

總結(jié)

到此這篇關(guān)于JS常用插件之Swiper插件實(shí)現(xiàn)輪播圖功能的文章就介紹到這了,更多相關(guān)JS Swiper插件實(shí)現(xiàn)輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: