vue3.x使用swiper(左右滑动)

最新推荐文章于 2024-09-06 23:40:25 发布

一个什么都不会的前端

最新推荐文章于 2024-09-06 23:40:25 发布

阅读量4.4k

点赞数

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

本文链接：https://blog.csdn.net/weixin_43090018/article/details/105561554

版权

vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

swiper坑太多了，话不多说，直接上代码

1、去swiper中vue使用方法安装swiper

2、我这个是在单页面中引用的，在全局中引用会报许多未知的错，就引在单个vue文件了

下载完成后在需要用到的vue页面中引入
js：import Swiper from 'swiper'
css：@import '../../../node_modules/swiper/css/swiper.css';

3、在mounted中初始化一下swiper
由于我的是左右滑动的，初始化的时候就写了那些
想要其他的可以去官网的api文档看一下：api文档

在这里插入代码片mounted () {
    //在页面全都加载完成后进行初始化
    // this.initSwiper()
    new Swiper('.swiper-container', {
     	slidesPerView : 3,
  		slidesPerGroup : 3,
    })
  },

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">slider1</div>
              <div class="swiper-slide">slider2</div>
              <div class="swiper-slide">slider3</div>
              <div class="swiper-slide">slider1</div>
              <div class="swiper-slide">slider2</div>
              <div class="swiper-slide">slider3</div>
            </div>
          </div>

css部分：

/* 优惠推荐部分 */
  .discount{
    padding: 0 12px;
    margin: 10px auto 20px;
  }
  .discount .title{
    font-size:17px;
    font-weight:bold;
    color:rgba(200,162,98,1);
    position: relative;
    width: 22%;
    margin: 0 auto;
  }
  .discount .title img{
    width: 17px;
    height: 13px;
    position: absolute;
    top: -3%;
    right: 0;
  }
  .discount-content{
    display: flex;
    align-items: center;
  }
  .discount-content .swiper-container{
    width: 100%;
    height: 150px;
  }
  .discount-content .swiper-container .swiper-wrapper{
    width: 100%;
    height: 100%;
  }
  .swiper-container .swiper-wrapper .swiper-slide{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 15px;
  }