vue Swiper(附例子)

长箭已搭弓

已于 2023-06-28 11:18:13 修改

阅读量673

点赞数

分类专栏： vue 文章标签：前端

于 2022-03-04 11:22:38 首次发布

本文链接：https://blog.youkuaiyun.com/include_computer/article/details/123272191

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Swiper组件。首先，通过安装依赖并检查package.json来确保安装成功。接着，在main.js文件中全局引入Swiper。文章提供了两个页面运用示例，展示了如何实现点击左右按钮进行切换的功能。示例包括HTML结构、CSS样式和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

npm install swiper@6 --save-dev

npm i vue-awesome-swiper@3.1.3 -S

package.json查看确认
在这里插入图片描述
main.js全局引入

//swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

页面运用例1

点击左右按钮切换
在这里插入图片描述

<div class="center-box">
	<swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide class="box-slide" v-for="(item, index) in jjList" :key="index">
            <div class="card">
              {{ item.message }}
        	</div>
    	 </swiper-slide>
 	</swiper>
	<div class="swiper-button-prev" slot="button-prev">
   		<img src="../../../assets/zlfxImages/dialog/left.png" class="arrow_left">
	</div>
	<div class="swiper-button-next" slot="button-next">
     <img src="../../../assets/zlfxImages/dialog/left.png" class="arrow_right">
 	</div>
 </div>

jjList: [
        {message: '第一'},{message: '第二'},{message: '第三'},{message: '第四'},{message: '第五'}
      ],
swiperOptions: {
        loop: true,
        // autoplay: {
        //   disableOnInteraction: false,
        //   delay: 2500
        // },
        slidesPerView: 3, // 显示个数
        spaceBetween: 10,
        direction: 'horizontal',
        grabCursor: true,
        touchStartPreventDefault: false,
        // pagination: {
        //   el: '.swiper-pagination'
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }

.center-box {
      height: 130px;
      width: 100%;
      color: #FFFFFF;
      position: relative;
      }
.card {
        //width: 250px;
        height: 130px;
        background: #1B163F;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #FFFFFF;
        }
/deep/ .swiper-button-next:after,
      .swiper-button-prev:after {
        display: none;
      }

      .arrow_left {
        width: 22px;
        height: 22px;
        transform: rotate(180deg);
        outline: none;
        border: 0;
        position: absolute;
        left: -40px;
      }

      .arrow_right {
        width: 22px;
        height: 22px;
        outline: none;
        border: 0;
        position: absolute;
        right: -40px;
      }

页面运用例2
html

<div class="card_content gktp">
          <div class="center-box">
            <swiper ref="mySwiper" :options="swiperOption">
              <swiper-slide class="box-slide" v-for="(item, index) in jjList" :key="index">
                <div class="card">
                  {{ item.message }}
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="czBtn">
            <div class="swiper-button-prev" slot="button-prev">
              <div class="arrow">
                <i class="el-icon-arrow-left"></i>
              </div>
            </div>
            <div class="swiper-button-next" slot="button-next">
              <div class="arrow">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>

css

.gktp {
        height: 240px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .center-box {
          height: 170px;
          width: 100%;
          position: relative;

          .card {
            height: 170px;
            border: 1px solid pink;
          }
        }

        .czBtn {
          width: 10%;
          height: 44px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          /*::v-deep .swiper-button-next:after {
            display: none;
          }

          ::v-deep .swiper-button-prev:after {
            display: none;
          }*/

          .swiper-button-next, .swiper-button-prev {
            display: flex;
            align-items: center;
            background: none;
          }

          .arrow {
            width: 23px;
            height: 23px;
            border-radius: 50%;
            border: 1px solid #11111F;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
          }
        }
      }

jjList: [
          {message: '第一'},
          {message: '第二'},
          {message: '第三'},
          {message: '第四'},
          {message: '第五'},
          {message: '第六'},
          {message: '第七'},
          {message: '第八'},
          {message: '第九'}
        ],
        swiperOption: {
          loop: true,
          slidesPerView: 5,
          spaceBetween: 29,
          direction: 'horizontal',
          grabCursor: true,
          touchStartPreventDefault: false,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }

在这里插入图片描述