swiper 左右保留部分

在这里插入图片描述

1、cdn引入


DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demotitle>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">    
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> script> 
    
    <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>
    
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1div>
        <div class="swiper-slide">Slide 2div>
        <div class="swiper-slide">Slide 3div>
        <div class="swiper-slide">Slide 4div>
        <div class="swiper-slide">Slide 5div>
        <div class="swiper-slide">Slide 6div>
        <div class="swiper-slide">Slide 7div>
        <div class="swiper-slide">Slide 8div>
        <div class="swiper-slide">Slide 9div>
      div>
      <div class="swiper-pagination">div>
    div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

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

7以上版本不支持vue2

npm install swiper@5.4.5
1

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

3、vue3版本

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

npm install swiper
1

文档地址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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

重点

//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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
HTML学习笔记
 微信小程序学习（十）：生命周期
 数据结构---课后习题（第一章）
关于 obdeploy 部署脚本中的 Oceanbase 相关密码的理解
 安装和初步使用 nn-Meter
分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测
 【POJ No. 2777】颜色统计 Count Color
rabbitMQ的direct模式的生产者与消费者使用案例
 基于Java+SpringBoot+LayUI仓库管理系统
 为何应用型本科（机器人工程等专业）大量学生选择考研
原文地址：https://blog.csdn.net/qq_43526066/article/details/125917288