swiper 左右保留部分

一个小渣渣۶

已于 2022-07-22 14:33:36 修改

阅读量740

点赞数

CC 4.0 BY-SA版权

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

于 2022-07-21 17:43:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43526066/article/details/125917288

vue 同时被 3 个专栏收录

15 篇文章

订阅专栏

6 篇文章

订阅专栏

css

6 篇文章

订阅专栏

这篇博客详细介绍了如何在HTML、Vue2和Vue3中集成并使用Swiper滑动组件。首先，展示了基本的HTML引入方式，通过CDN加载Swiper的CSS和JS文件，然后初始化Swiper实例。接着，提供了Vue2版本的实现，利用npm安装Swiper@5.4.5，并在组件中创建Swiper实例。最后，展示了Vue3的实现，基于Swiper Vue.js组件库进行安装和配置，同时展示了滑动事件的监听方法。文章强调了不同Vue版本中Swiper的版本兼容性和使用注意事项。

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

在这里插入图片描述

1、cdn引入


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">    
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script> 
    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        margin: 0;
        padding: 0;
      }

      body {
        background: #eee;
      }

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

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
      }

      .swiper-slide {
        width: 60%;
      }
    </style>
  </head>

  <body>
    <!-- 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-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>

2、vue2版本
在这里插入图片描述

7以上版本不支持vue2

npm install swiper@5.4.5

<template>
  <div class="box-wrap">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swipeList"  :key="index" :style="{background:item.bg}">
          {{item.title}}
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css';

export default {
  data(){
    return{
       swipeList:[
          {
            id:1,
            title:11111,
            bg:'#cfc'
          },
          {
            id:2,
            title:2222,
            bg:'#f00',
          },
          {
            id:3,
            title:3333,
            bg:'#cfc'
          },
          {
            id:4,
            title:4444,
            bg:'#ffc'
          },
        ],
    }
  },
  mounted(){
    setTimeout(()=>{
      this.initSwiper()
    })
  },
  methods:{
    initSwiper(){
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    },
  }
}
</script>
<style>
.box-wrap{
  position: relative;
  height: 100vh;
  background: #eee;
}
.swiper {
        width: 100%;
        height: 300px;
        
      }
.swiper-slide {
        width: 60%;
        height: 300px;
      }

</style>

3、vue3版本

在这里插入图片描述
版本8+

npm install swiper

文档地址https://swiperjs.com/vue

<template>
  <div class="box-wrap">
     <swiper
     :modules="modules"
     slidesPerView="auto"
     centeredSlides
        :space-between="30"
        :pagination="{ el:'.swiper-pagination',clickable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        class="swiper"
      >
        <swiper-slide class="swiper-slide" v-for="(item,index) in swipeList"  :key="index" :style="{background:item.bg}">
          {{item.title}}
        </swiper-slide>
        ...
      </swiper>
      <div class="swiper-pagination aaa111"></div>
  </div>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
   
   export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };

      return {
        onSwiper,
        onSlideChange,
        modules: [Pagination],
        swipeList:[
          {
            id:1,
            title:11111,
            bg:'#cfc'
          },
          {
            id:2,
            title:2222,
            bg:'#f00',
          },
          {
            id:3,
            title:3333,
            bg:'#cfc'
          },
          {
            id:4,
            title:4444,
            bg:'#ffc'
          },
        ],
      };
    },
  };
</script>
<style scoped>
.box-wrap{
  position: relative;
  background: #eee;
  width: 80vw;
  height: 80vh;
}
.swiper{
  height: 300px;
}
.swiper-slide{
  width: 60vw;
}
</style>

重点

//css
.swiper-slide {
  width: 60%;
 }
 //js
<script>
    var swiper = new Swiper(".mySwiper", {
       slidesPerView: "auto",
       centeredSlides: true,
       spaceBetween: 30,
       pagination: {
         el: ".swiper-pagination",
         clickable: true,
       },
     });
   </script>