Use swiper to make carousel

insert image description here

Hello, I am 17.
Although I am a person who likes to make wheels, I still use the swiper directly. It has many functions and is very convenient. This article describes some commonly used functions.

Version Swiper 8.3.0

basic usage

<div class="swiper mySwiper">

      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>

      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper(".mySwiper", {
    
    
 /**
   * 设置Slide的切换效果，默认为"slide"（普通位移切换），
   * 还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、
   * "flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
   */
  effect:slide,
  //自动播放
  autoplay:true,
  // 垂直切换
  direction: "vertical", 
  // slider容器能够同时显示的 slides 数量
  slidesPerView: 3,
  // 在slide之间设置距离(px）
  spaceBetween: 10,
  // 定义slides的数量多少为一组，就是一页切换多少个slides
  slidesPerGroup: 3,
  // 重复
  loop: true,
  /**
   * 默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。
   * 开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。
   * 
   * 自由模式影响的是鼠标拖动或touch移动，分页器不受影响。
   */
  freeMode:false,
  /**
   * 居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
   *
   * 一般来说，要配置 loop:true 一起使用，否则初始的时候，并没有居中的效果。
  */
  centeredSlides: true,
  //左右切换按钮
  navigation: {
    
    
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  //分页
  pagination: {
    
    
    el: ".swiper-pagination",
    clickable: true,
  },
  on:{
    
    
    click: function(e){
    
    
      // 打印当前索引
      console.log(e.activeIndex)
    }
  },
});

I have written all the commonly used configurations, and I just delete them if I don’t need them.

The style of the outermost swiper

margin-left: auto;
margin-right: auto;
position: relative;

The height and width are not set, and the user needs to set the width and height. If the outer container is wider than it, it will be displayed in the center of the left and right.

The style of the inner swiper-wraper

position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;

Same size as swiper. Inside are arranged in order swiper-slidefrom left to right . The default effect effect:'slide'is the effect of sliding left and right. Animate by changing the X value of swiper-wraperon each time. transform: translate3d(X,0,0)So we can change the easing effect animation-timing-functionby . The duration specified in the style is 2s, but it will not take effect. The duration can only be modified by speedthe parameter . However, the 0.2s delay in the style is valid.

.swiper-wrapper{
    
    
  /* 通过改变animation-timing-function 制作弹性切换效果 */
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
 }

var swiper = new Swiper('.swiper-container', {
    
    
  speed: 2000,
    navigation: {
    
    
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 });

The style of swiper-slider is

.swiper-slide {
    
    
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

When swiper-slideradding a border to , overflow:hiddenthe border will not be fully displayed due to the external swiper. So we need to add a style to the swiper-slider class

 box-sizing:border-box;

Pager

pagination: {
    
    
  el: ".swiper-pagination",
  type: "fraction",
}

There are several types

'bullets' dots (default)
'fraction' fraction, like (1/10)
'progressbar' progress bar, a thin bar at the top, the larger the page number, the longer the bar.

or custom

.swiper-pagination-bullet {
    
    
   /*自定义分页器样式 */
}

.swiper-pagination-bullet-active {
    
    
  /*自定义 当前 分页器样式 */
}

pagination: {
    
    
  el: ".swiper-pagination",
  clickable: true,
  //自定义分页器 html
  renderBullet: function (index, className) {
    
    
    return '<span class="' + className + '">' + (index + 1) + "</span>";
  },
},

Stereo effect

.swiper-slide {
    
    
  transition-duration: .2s;
  transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
    
    
  transform: scale(1);
}

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

It can be seen from the style that it is large in the middle and small on both sides. With the addition transitionof , size switching becomes smooth.

part of left and right

.swiper-slide {
    
    
  width: 60%;
}

var swiper = new Swiper('.mySwiper', {
    
    
  slidesPerView: 'auto',
  spaceBetween: 60,
  centeredSlides: true,
  loop: true,
  pagination: {
    
    
    el: '.swiper-pagination',
    clickable: true,
  },
});

Originally, only one slide was displayed, but afterwidth: 60%; specifying js and specifying in the style, part of the left and right sides will be displayed.centeredSlides: true

thumbnail control

 <div class="swiper swiper-big">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

  </div>
  <div class="swiper swiper-small">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      
    </div>
</div>

var swiperSmall = new Swiper(".swiper-small", {
    
    
  loop:true,
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
new Swiper(".swiper-big", {
    
    
  loop:true,
  navigation: {
    
    
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    
    
    swiper: swiperSmall,
  },
});

The big image swiper and the small image swiper are completely separate. swiper: swiperSmallAssociate the large and small graphs together.

The thumbnail watchSlidesProgress: trueis required. slidesPerViewShould be greater than 1.

If you want to loop, both swipers need to writeloop:true

positioning anchor

<div class="swiper">
    <div class="swiper-wrapper">
	<div class="swiper-slide" data-hash="slide1">slider1</div>
        <div class="swiper-slide" data-hash="slide2">slider2</div>
        <div class="swiper-slide" data-hash="slide3">slider3</div>
	</div>
</div>

new Swiper('.swiper',{
    
     hashNavigation: true, })

parallax effect

Web page effect

<div class="swiper-slide">
  <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
  <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
  <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
    <p>从右边300px开始进入，时间600ms</p>
  </div>
  <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
  <div data-swiper-parallax-scale="0.15" >缩放变化</div>
</div>
</div>

var mySwiper = new Swiper('.swiper',{
    
     parallax : true, })

Responsive settings

Zoom out and zoom in to the width of the web page to view
the page effect

breakpoints: {
    
    
    640: {
    
    
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
    
    
      slidesPerView: 4,
      spaceBetween: 40,
    },
    1024: {
    
    
      slidesPerView: 5,
      spaceBetween: 50,
    },
 },

It is not a step change, but a gradual change, which will have higher requirements for the content.

Common functions

other applications

In addition to the slide switching function, swiper can also be used as a scrolling container with custom scroll bars.