swiper视频轮播

最新推荐文章于 2024-06-24 17:55:20 发布

七七Cqq

最新推荐文章于 2024-06-24 17:55:20 发布

阅读量333

点赞数 1

分类专栏：功能代码文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_67869050/article/details/128097744

版权

这篇博客介绍了如何在jQuery项目中利用Swiper库创建视频轮播图，强调了在初始化swiper时需要为不同轮播图设置独特标识（如.swiper-container1）以避免数据重复显示的问题。

摘要由CSDN通过智能技术生成

swiper视频轮播（jquery中）

html部分

                    <div class="swip2">
                        <div class="swiper-container swiper-container1">
                            <div class="swiper-wrapper" id="swipervideo">
                                <div class="swiper-slide">
                                    <div>
                                        <video style="width: 100%; height: 100%; object-fit: fill" muted
                                            autoplay="autoplay" loop
                                            src="https://cdn.zwzlv.com/sykjcloud/2022-11-28/e13ffe99840f4bed99eef62dc3f51ba0.mp4"></video>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div><img src="../static/imgs/swip2.png" alt=""> </div>
                                </div>
                                <div class="swiper-slide">
                                    <div><img src