您现在的位置: 首页 > 资讯 > 互联网知识 > 常用的响应式多图滚动可鼠标手动滑动效果

常用的响应式多图滚动可鼠标手动滑动效果

互联网知识2022-08-12 15:56:47ddcweb168
html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-
 

 

 

<style type="text/css">html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* 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;
    }
.swiper-slide img{ width: 100%;}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/6-1P615101036226.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/6-1PI11F510a1.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1PP111031D56.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1PS110441M32.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1P920110249603.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z6111F5094a.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z531144111463.jpg" /></a></div>
<div class="swiper-slide"><a href="#"><img src="https://www.sooseo.net/skin/yycms/5-1Z5161Z403J4.jpg" /></a></div></div>
<div class="swiper-pagination">&nbsp;</div></div><script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30
    });
    </script>
本文标签:
售前咨询
售后咨询
技术咨询
扫一扫

全国免费服务热线
13712877293

返回顶部