初识vue（12）—— 使用 swiper 实现轮播

川长思鸟来 2022-10-30 07:25 149阅读 0赞

**swiper 中文网地址：[http://www.swiper.com.cn/][http_www.swiper.com.cn]**

#### 1. 下载 swiper ####

> npm install --save swiper

#### 2. 在需要用到swiper插件的组件中引入swiper 和 css ####

import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.css'

这个 css 引入路径具体看 node\_modules 文件夹下 swiper 文件夹下css的路径。

#### 3. html 和 css 代码 ####

<template>
      <section class="msite">
      
        <nav class="msite_nav">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/1.jpg">
                  </div>
                  <span>甜品饮品</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/2.jpg">
                  </div>
                  <span>商超便利</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/3.jpg">
                  </div>
                  <span>美食</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/4.jpg">
                  </div>
                  <span>简餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/5.jpg">
                  </div>
                  <span>新店特惠</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/6.jpg">
                  </div>
                  <span>准时达</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/7.jpg">
                  </div>
                  <span>预订早餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/8.jpg">
                  </div>
                  <span>土豪推荐</span>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/9.jpg">
                  </div>
                  <span>甜品饮品</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/10.jpg">
                  </div>
                  <span>商超便利</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/11.jpg">
                  </div>
                  <span>美食</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/12.jpg">
                  </div>
                  <span>简餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/13.jpg">
                  </div>
                  <span>新店特惠</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/14.jpg">
                  </div>
                  <span>准时达</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/1.jpg">
                  </div>
                  <span>预订早餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/2.jpg">
                  </div>
                  <span>土豪推荐</span>
                </a>
              </div>
            </div>
            
            <div class="swiper-pagination"></div>
          </div>
        </nav>
      </section>
    </template>

这里依旧是跟着视频用的 stylus

<style lang="stylus" rel="stylesheet/stylus">
      @import "../../common/stylus/mixins.styl"
      .msite  //首页
        width 100%
        .msite_nav
          bottom-border-1px(#e4e4e4)
          margin-top 45px
          height 200px
          background #fff
          .swiper-container
            width 100%
            height 100%
            .swiper-wrapper
              width 100%
              height 100%
              .swiper-slide
                display flex
                justify-content center
                align-items flex-start
                flex-wrap wrap
                .link_to_food
                  width 25%
                  .food_container
                    display block
                    width 100%
                    text-align center
                    padding-bottom 10px
                    font-size 0
                    img
                      display inline-block
                      width 50px
                      height 50px
                  span
                    display block
                    width 100%
                    text-align center
                    font-size 13px
                    color #666
            .swiper-pagination
              >span.swiper-pagination-bullet-active
                background #02a774
    </style>

#### 4. 创建一个 swiper 实例对象，来实现轮播 ####

export default { 
      mounted () { 
        //创建一个 swiper 实例对象，来实现轮播
        new Swiper('.swiper-container', { 
          //如果需要分页器
          pagination: { 
            el: '.swiper-pagination',
          },
          //可以循环轮播
          loop: true
        })
      }
    }

运行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### 5. 补充 swiper 的使用方法 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]  
来自 swiper 中文网地址 [Swiper 使用方法][Swiper]

[http_www.swiper.com.cn]: http://www.swiper.com.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221024/30540369ac964c909f504a28a8bdabc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221024/fe5baf10f4864f8e92cc5733361f8e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221024/16a2602756584c10ad263553fe8502ed.png
[Swiper]: https://www.swiper.com.cn/usage/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 使用 swiper 实现轮播的那些事

首先运行 npm下载 npm install swiper --save-dev 在需要用到的页面中 <template> <div cla

╰半橙微兮°/ 2022年12月22日 11:23/ 0 赞/ 140 阅读

相关初识vue（12）—— 使用 swiper 实现轮播

swiper 中文网地址：[http://www.swiper.com.cn/][http_www.swiper.com.cn] 1. 下载 swiper > npm

川长思鸟来/ 2022年10月30日 07:25/ 0 赞/ 150 阅读

相关 Vue中使用swiper插件实现轮播图

最终效果如图: ![20210623143509101.gif][] 为了更稳定不建议使用最新版本swiper 下载指定版本如下图: 用到vue-aweso

爱被打了一巴掌/ 2022年10月09日 02:56/ 0 赞/ 226 阅读

相关 Vue封装Swiper实现图片轮播

> 图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。一、Swiper 在实现封装之前，先介绍一下

ゞ浴缸里的玫瑰/ 2022年05月31日 03:54/ 0 赞/ 242 阅读

相关 vue中使用轮播图 Vue-Awesome-Swiper

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，这个就是swiper，不过弄了一个适合vue的东西; 官方这样

我不是女神ヾ/ 2022年05月25日 01:08/ 0 赞/ 215 阅读

相关 vue使用swiper实现轮播图代码

<div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper">

悠悠/ 2022年04月12日 11:46/ 0 赞/ 237 阅读

相关 Swiper实现图片轮播

关于Swiper（[https://www.swiper.com.cn/][https_www.swiper.com.cn]） Swiper 是一款免费以及轻量级的移动设

布满荆棘的人生/ 2022年04月10日 14:18/ 0 赞/ 327 阅读

相关用Swiper实现轮播图

任务描述本关任务：用Swiper实现一个轮播图。效果如下： ![196943][] 相关知识为了完成本关任务，你需要掌握：1.swiper基本的HTMl结构，2

╰+哭是因爲堅強的太久メ/ 2022年04月04日 11:58/ 0 赞/ 314 阅读

相关 vue+swiper实现轮播效果一个页面放多个轮播

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

浅浅的花香味﹌/ 2022年01月28日 05:53/ 0 赞/ 1134 阅读

相关用Swiper实现轮播图

用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件任务描述本关任务：用Swiper实现一

系统管理员/ 2021年06月24日 13:58/ 0 赞/ 521 阅读