swiper轮播产品

直接使用代码

图片素材

css代码

<link rel="stylesheet" href="http://www.bootfastui.cn/img/2021/0307-3/swiper.css" /> 
<style>
.com-img .com-hover2{display: none;}
.com-img:hover .com-hover{display: none;}
.com-img:hover .com-hover2{display:inline-block;}

.prod_slide_block{height:170px;border:1px solid #ccc}
.flex_center{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;overflow:hidden}
.flex_center img{width:60px}
.prod_slide_item{width:20%;height:160px;overflow:hidden;border-right:1px solid #d2d2d2;float:left}
.prod_slide_item a{display:block;height:100%;padding-left:30px;padding-right:30px;padding-top:20px;color:#686667;text-decoration:none}
.prod_slide_item a:active,.prod_slide_item a:hover{text-decoration:none}
.prod_slide_item .flex_center{height:64px;margin-bottom:10px}
.prod_slide_item h2{text-align:center;font-size:18px;line-height:26px;height:52px;overflow:hidden;color:#333}
.prod_slide_item:hover h2{color:#e60012;text-decoration:none}
.prod_slide .swiper-button-next.swiper-button-disabled,.prod_slide .swiper-button-prev.swiper-button-disabled{display:none}
.prod_slide .swiper-button-next,.prod_slide .swiper-button-prev{width:36px;height:160px;margin-top:-80px;background:#ebeff159;text-align:center;vertical-align:middle}
.prod_slide .swiper-button-next img,.prod_slide .swiper-button-prev img{display:inline-block;margin-top:70px;width:16px}
.prod_slide .swiper-button-next:hover,.prod_slide .swiper-button-prev:hover{background:#8f9195}
.prod_slide .swiper-button-next,.prod_slide .swiper-container-rtl .swiper-button-prev{right:0;border-top-left-radius:5px;border-bottom-left-radius:5px}
.prod_slide .swiper-button-prev,.prod_slide .swiper-container-rtl .swiper-button-next{left:0;border-top-right-radius:5px;border-bottom-right-radius:5px}

</style>

HTML+JS代码

 
<br><br>
<script src="http://www.bootfastui.cn/img/2021/0307-3/swiper.js"></script>
<div class="h3 text-center line80 "><b>产品</b></div>
<div class="prod_slide_block">
    <!-- prod 輪播 -->
    <div class="swiper-container prod_slide" id="prod_slide">
        <div class="swiper-wrapper">
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">
                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center ">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico1.png" alt="TVS瞬态抑制二极管" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico11.png" alt="TVS瞬态抑制二极管" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        符合车规的TVS二极管
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico3.png" alt="ESD静电抑制器" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico33.png" alt="ESD静电抑制器" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        单路和多路静电抑制器
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico2.png" alt="保护型晶闸管" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico22.png" alt="保护型晶闸管" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        保护型晶闸管
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico4.png" alt="信号用陶瓷气体放电管" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico44.png" alt="信号用陶瓷气体放电管" class="com-hover2">

                    </div>
                    <!-- title -->
                    <h2>
                        信号用陶瓷气体放电管
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico5.png" alt="二极管及整流器" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico55.png" alt="二极管及整流器" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        二极管及整流器
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico6.png" alt="PPTC" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico66.png" alt="PPTC" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        表面贴装型PPTC
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico1.png" alt="PPTC" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico11.png" alt="PPTC" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        工业用TVS二极管
                    </h2>
                </a>
            </div>
            <!-- slider -->
            <div class="swiper-slide prod_slide_item com-img">

                <a href="http://bootfastui.com" target="_self" class="" title="Overview">
                    <div class="flex_center">
                        <!-- img -->
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico5.png" alt="PPTC" class="com-hover">
                        <img src="http://www.bootfastui.cn/img/2021/0307-3/index_ico55.png" alt="PPTC" class="com-hover2">
                    </div>
                    <!-- title -->
                    <h2>
                        小信号Zeners
                    </h2>
                </a>
            </div>
        </div>
        <!-- 導航鈕 -->
        <div class="swiper-button-prev"><img src="http://www.bootfastui.cn/img/2021/0307-3/ico_left3.png" alt="" class="right_ico"></div>
        <div class="swiper-button-next"><img src="http://www.bootfastui.cn/img/2021/0307-3/ico_right3.png" alt="" class="right_ico"></div>
    </div>
</div>

<script>
    $(function () {


        // Prod Slider
        var prodSwiper = new Swiper('#prod_slide', {
            slidesPerView: '5',
            loop: false,
            preventClicks: false,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 1,
            breakpoints: {
                1200: {
                    slidesPerView: 3,
                },
                768: {
                    slidesPerView: 1,
                }
            }

        });


    });
</script>