vue项目中使用swiper.js

版本号：“swiper”: “^4.5.1”,
swiper官网：https://www.swiper.com.cn/demo/index.html

1、中间放大，两边缩小的swiper轮播图；

在这里插入图片描述

页面接口代码：

<div v-if="showbanner" class="swiper-wrap">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="(item, i) in images" :key="i" class="swiper-slide">
                    <!-- 具体内容 -->
                    <img
                        @click="goDetail(item)"
                        :src="item.banner"
                        alt="商品图片"
                    />
                </div>
            </div>
            <div class="swiper-pagination" />
        </div>
    </div>

在需要的页面中引入

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

initSwiper() {
    this.swiper = new Swiper(".swiper-container", {
        observer: true, // 当改变swiper样式或修改swiper的子元素时，自动初始化swiper，
        observerParents: true,
        effect: "coverflow", // 切换效果'slide(普通切换、默认)','fade('淡入')','cube(方块)','coverflow(3d流)','flip(3d翻转)'
        centeredSlides: true, // 设置活动块居中
        spaceBetween: "18%", // slide中间的设置距离（单位PX）;
        slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量
        loopedSlides: this.images.length+2, // 设置所要用到的loop个数（一般设置大于可视slide个数2个）
        loop: true,
        autoplay: true,
        coverflowEffect: { // coverflow效果参数
            rotate: 0, // slide做3d旋转时Y轴的旋转角度
            stretch: 0, // 每个slide之间的拉伸值，越大slide靠的越紧，5.3.6后可使用百分比%
            depth: 300, // slide的位置深度，值越大Z轴距离越远，看起来越小
            modifier: 1, // 
            slideShadows: false // 是否开启slide阴影
        },
        // 分页器配置
        pagination: {
            el: ".swiper-pagination"
        },

    });
},

2、普通图片轮播
在这里插入图片描述

页面结构同1

配置：

new Swiper('.swiper-container1', {
    autoplay: true,
    observer: true, // 修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    loop: true,
    pagination: {
        el: '.swiper-container1 .swiper-pagination',
    },
});

3、带左右按钮的多个图片轮播

在这里插入图片描述

页面结构：

<div class="swiper-container swiper-container3">
    <div class="swiper-wrapper">
        <div
            v-for="(item, index) in courseList"
            :key="index"
            class="swiper-slide"
            @click="adviso(item.name)"
        >
            <img
                :src="item.url"
                alt=""
            >
            <div
                class="commontitle-small"
                :class="'itemtitle' + index"
            >
                <h3>{{ item.name }}</h3>
                <span />
            </div>
            <p class="course-list-ul-item-text">
                {{ item.content }}
            </p>
        </div>
    </div>
</div>
// 左右切换按钮
<div class="swiper-button-next">
    <img
        src="../../../assets/images/jiantou1.png"
        alt=""
    >
</div>
<div class="swiper-button-prev">
    <img
        src="../../../assets/images/jiantou.png"
        alt=""
    >
</div>

配置：

 new Swiper('.swiper-container3', {
    slidesPerView: 5,
    spaceBetween: 0,
    slidesPerGroup: 1,
    observer: true, // 修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    loopFillGroupWithBlank: true,
    navigation: {
        nextEl: '.banner_info3 .swiper-button-next',
        prevEl: '.banner_info3 .swiper-button-prev',
    },
});

4、带左右切换、分页器的异形slide（可播放视频）
在这里插入图片描述

页面结构：

<div
	style="position: relative"
    class="banner-info2"
>
<div class="swiper-container swiper-container2">
    <div class="swiper-wrapper">
        <div
            ref="slide"
            class="swiper-slide"
        >
            <div
                v-if="itemid !== '1'"
                class="coverImg"
            >
                {{ itemid }}
                <img
                    src="../../../assets/images/video1/icon_video2.png"
                    alt=""
                    data-url="http://yj.zhishiditu.net/uploaddata/upload/zh3.mp4"
                >
            </div>
            <div class="img">
                <img
                    v-if="itemid !== '1'"
                    src="../../../assets/images/video1/shouyelongjuanfeng.png"
                    alt=""
                >
                <p>龙卷风</p>
            </div>
        </div>
        <div
            ref="slide1"
            class="swiper-slide"
        >
            <div
                v-if="itemid !== '2'"
                class="coverImg"
            >
                <img
                    src="../../../assets/images/video1/icon_video2.png"
                    alt=""
                    data-url="http://yj.zhishiditu.net/uploaddata/upload/zh6.mp4"
                >
            </div>
            <div class="img">
                <img
                    v-if="itemid !== '2'"
                    src="../../../assets/images/video1/shouyehuozai.png"
                    alt=""
                >
                <p>火灾</p>
            </div>
        </div>
        <div
            ref="slide2"
            class="swiper-slide"
        >
            <div
                v-if="itemid !== '3'"
                class="coverImg"
            >
                <img
                    src="../../../assets/images/video1/icon_video2.png"
                    alt=""
                    data-url="http://yj.zhishiditu.net/uploaddata/upload/zh9.mp4"
                >
            </div>
            <div class="img">
                <img
                    v-if="itemid !== '3'"
                    src="../../../assets/images/video1/shouyeshanti.png"
                    alt=""
                >
                <p>山体滑落</p>
            </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination" />
</div>
<div
    class="swiper-button-next"
    @click="changeone"
>
    <img
        src="../../../assets/images/jiantou1.png"
        alt=""
    >
</div>
<div
    class="swiper-button-prev"
    @click="changeone"
>
    <img
        src="../../../assets/images/jiantou.png"
        alt=""
    >
</div>
<video
    v-if="showvideo"
    id="myVideo"
    class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    controlslist="nodownload  nofullscreen noremoteplayback"
    autoplay="muted"
    preload="auto"
>
    <source
        :src="videoUrl"
        type="video/mp4"
    >
</video>
</div>

配置：

this.swiper = new Swiper('.swiper-container2', {
    slidesPerView: 3,
    spaceBetween: -28,
    slideToClickedSlide: true,
    centeredSlides: true,
    observer: true, // 修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    preventClicksPropagation: false,
    loop: true,
    on: { click(e) {}}, // 动态添加事件
    pagination: {
        el: '.banner-info2 .swiper-pagination',
    },
    navigation: {
        nextEl: '.banner-info2 .swiper-button-next',
        prevEl: '.banner-info2 .swiper-button-prev',
    },
});

样式：

<style lang="less">
.ivu-modal-body {
    width: 600px;
    height: 500px;
}
.ivu-modal-content {
    width: 600px;
    height: 531px;
}
.ivu-modal-footer {
    border-top: 0px !important;
}
.swiper-pagination-bullet-active {
    background: #d02e3d !important;
}
</style>
<style lang="less" scoped>
.video-js {
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -247px;
    width: 494px;
    height: 331px;
    z-index: 9999999;
    // margin-top: 24px;
}
.swiper-container2 {
    width: 100%;
    height: 500px;
}
.swiper-slide {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.7);
    .coverImg {
        position: absolute;
        top: 58px;
        left: -38px;
        width: 118%;
        height: 77%;
        background: #000;
        opacity: 0.2;
        img {
            width: 80px;
            height: 80px;
            position: absolute;
            display: none;
            top: 50%;
            left: 50%;
            margin: -40px;
        }
    }
    .img {
        img {
            width: 493px;
            height: 332px;
            display: inline-block;
        }
        p {
            width: 493px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 17px;
            color: #ccc;
            background: #333;
            margin-top: -8px;
        }
    }
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
    // width: 492.9px !important;
    transform: scale(1);
    z-index: 9999;
    .coverImg {
        img {
            display: inline-block !important;
        }
    }
}
.swiper-button-next {
    background-image: none !important;
    right: -4px !important;
    &:focus {
        outline: none;
    }
}
.swiper-button-prev {
    background-image: none !important;
    left: -4px !important;
    &:focus {
        outline: none;
    }
}
</style>

Tips：

1、如果是从后端动态获取的图片数据，需要保证图片完全获取后再初始化swiper，这样才能保证分页器正常显示，图片正常轮播。

2、如果同一个页面使用多个swiper，会造成同一属性再多个swiper上生效。例如：点击第一个swiper向右切换的按钮，第二个swiper也会跟着向右切换一个。此时我们要做的就是在每个swiper外面包一层div 然后设置单独的类名，在配置分页器和切换按钮时 将此类名写上即可。

解决方法见第四个swiper
3、需要给从后台动态获取数据的轮播图添加点击事件时，只是单纯的在标签上使用@click来处理事件的话，对于没有开启autoplay和loop的轮播图可以生效，反之第二次轮播时点击事件就会失效。

解决办法：在初始化swiper的配置项中添加点击事件

				on: {
                    click(e) {
                        selfthis.$nextTick(() => {
                            const { item } = e.target.dataset; // jumpurl是在swiper-slide中动态绑定的data-jumpUrl属性，值是从后台获取的跳转链接
                            selfthis.goDetail(JSON.parse(item));
                        });
                    }
                },
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue