自定义swipper左右按钮，区分网页版和手机版时不同状态下显示的效果

本文链接：https://blog.csdn.net/zhangzhuo1130/article/details/100765321

效果图：
在这里插入图片描述
代码：
css样式

 .swiper-container {
            width: 80%;
        }

        .swiper-slide {
            width: 25%;
        }

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

        .swiper-father {
            width: 100%;
            position: relative;
            margin-top: 60px;
        }

        .swiper-button-bef {
            border: 2px solid #333333;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .swiper-button-nex {
            border: 2px solid #333333;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

<div class="swiper-father">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a1.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a2.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a3.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a4.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a1.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a2.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a3.jpg') ?>"></div>
                            <div class="swiper-slide"><img src="<?php echo base_url('resource/images/a4.jpg') ?>"></div>
                        </div>
                        <!-- siwper原本的箭头放在这里 -->
                        <!-- <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div> -->
                    </div>
                    <!-- 我们把swiper 的箭头放到swiper 外面 -->
                    <div class="swiper-button-bef">
                        <img src="<?php echo base_url('resource/images/sl.png') ?>">
                    </div>
                    <div class="swiper-button-nex">
                        <img src="<?php echo base_url('resource/images/sr.png') ?>">
                    </div>

                </div>

<script>

    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: false,
            navigation: {
                nextEl: '.swiper-button-bef',
                prevEl: '.swiper-button-nex',

            },
            slidesPerView: 1,
            loop: true,

        })
    } else {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: false,
            navigation: {
                nextEl: '.swiper-button-bef',
                prevEl: '.swiper-button-nex',

            },
            slidesPerView: 4,
            spaceBetween: 30,
            loop: true,

        })
    }
</script>