Swiper制作轮播图

最新推荐文章于 2023-12-04 10:58:33 发布

♛暮辞

最新推荐文章于 2023-12-04 10:58:33 发布

阅读量83

点赞数

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

本文链接：https://blog.csdn.net/qq_45026664/article/details/129316466

版权

Swiper 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先先看看整体效果

轮播图

这里写你自己cssjs文件的位置
https://www.swiper.com.cn/api/carousel/198.html
上面是官网js和css没有的去官网下载
<script src="<?php echo get_template_directory_uri() . '/js/swiper/swiper-bundle.min.js'; ?>"></script>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/js/swiper/swiper-bundle.min.css'; ?>">
下面是我自定义的css
<style>
 /* 轮播图的js */
        .swiper_box {
            width: 100%;
            background-color: #F3F4F8;
            padding: 5vw 0px 5vw 0px;
        }

        .swiper-slide {
            /* background-color: red; */
            /* border: 1px solid yellow; */
        }

        .swiper_box_1280 {
            /*background-color: white; */
            margin: auto;
            position: relative;
        }

        .swiper {
            width: 100%;
            height: 296px;
            text-align: center;
        }

        .swiper-slide {
            width: 395px;
            height: 296px;
        }

        .swiper-slide img {
            width: 100%;
            height: 296px;
        }

        .swiper-wrapper {
            width: 80%;
        }

        .swiper-initialized {
            line-height: 1.5em;
        }

        a {
            color: #858891;
            font-family: 'Overpass';
            text-decoration: none;
        }
</style>
下面是html的主体部分
<div class="swiper_box">
                <div class="swiper_box_1280">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/1280.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/3173.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/3418.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/6461.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/9679.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/10773.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/14641.png' ?>" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img class="img_blog" src="<?php echo get_template_directory_uri() . '/questionImg/16477.png' ?>" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            下面是设置轮播图的js
            <script>
            //轮播图的js
        var hs_screen_width = document.body.clientWidth;
        //  console.log("页面刷新的时候初始宽度"+hs_screen_width)
        var hs_swiper_pic_number = 3;
        if (hs_screen_width > 767 && hs_screen_width < 1300) {
            hs_swiper_pic_number = 2;
        } else if (hs_screen_width < 767) {
            hs_swiper_pic_number = 1;
        } else {
            hs_swiper_pic_number = 3
        }
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 2000,
                disableOnInteraction: true,
            },
            slidesPerView: hs_swiper_pic_number,
            spaceBetween: 15,
            on: { // hs使用这个监听，唯有在浏览器窗口变化时才触发。
                resize: function() {
                    var kuan = document.body.clientWidth;
                    // console.log("浏览器窗口改变是同步宽度"+kuan)
                    if (kuan > 1300) {
                        this.params.slidesPerView = 3;
                    } else if (kuan < 1300 && kuan > 767) {
                        this.params.slidesPerView = 2;
                    } else {
                        this.params.slidesPerView = 1;
                    }
                    this.update(); //窗口变化时，更新Swiper的一些属性，如宽高等
                },
            },
        })
            </script>