JS：swiper异形slide

大佬，咋整啊

已于 2022-09-16 16:17:18 修改

阅读量7.8k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： css

于 2020-07-20 22:22:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41981909/article/details/107475834

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍使用Swiper库创建响应式轮播图的过程。包括CSS样式设置，如滑块的居中显示、过渡效果及缩放动画；HTML结构定义，如容器、滑块和分页器的布局；以及JavaScript初始化配置，如每屏显示数量、滑块间距、循环播放等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

css:

.swiper-container {
	 position: relative;
     width: 100%;
     height: 500px;
   }
.swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #eee;
     display: flex;
     justify-content: center;
     align-items: center;
	 transition: 300ms;
	 transform: scale(0.8);
   }
.swiper-slide-active,.swiper-slide-duplicate-active{
     transform: scale(1);
  	}

html：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

js：

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
			spaceBetween: 30,
			centeredSlides: true,
			loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });