在vue工程中引入swiper

最新推荐文章于 2024-04-29 15:36:22 发布

南城夏季

最新推荐文章于 2024-04-29 15:36:22 发布

阅读量244

点赞数

分类专栏：业务 js vue

本文链接：https://blog.csdn.net/weixin_39818813/article/details/100641904

版权

vue 同时被 3 个专栏收录

115 篇文章 0 订阅

订阅专栏

105 篇文章 0 订阅

订阅专栏

业务

61 篇文章 1 订阅

订阅专栏

1.下载依赖

npm install swiper

2.引入依赖

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

3.使用swiper

js:

  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }

html:

   <div class="zm-banner">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="../../../static/image/banner1.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../static/image/banner1.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../static/image/banner1.png" alt="" />
                </div>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
          </div>

css:

.swiper-pagination{

// text-align: center;

position: relative;

margin-top:-25px;

}