欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js:swiper异形slide

程序员文章站 2022-06-24 12:34:43
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; tr...

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,
      },
    });

本文地址:https://blog.csdn.net/weixin_41981909/article/details/107475834

相关标签: JavaScript