Use Swiper to quickly implement 3D effect rotation

Recently, we often receive the demand of 3D effect of round cast graph, so we record it for later use.

The specific implementation effect is as follows:

There are two ways to use it, one is native HTML + PHP backend rendering and the other is using VUE.

A freestanding implementation

The introduction of

First, we introduce the native use of swiper.min. CSS and swiper.min.js according to the official document of swiper.

<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.1/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.1/js/swiper.min.js"></script>
Copy the code

HTML structure

The HTML structure is as follows:

<! -- Teacher introduction -->
<div class="jieshao">
    <div class="swiper-container2">
        <div class="swiper-wrapper">
            {volist name="teacherInfo" id="vo"}
            <div class="swiper-slide">
                <img class="swiper-img" src="__CDN__{$vo.image}" alt="" />
                <div class="lay-pop">
                    <div class="lay-pop-box">
                    </div>
                    <div class="title">
                       {$vo.name}
                    </div>
                    <div class="desc">
                    {$vo.description}
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>
Copy the code

CSS structure

The CSS structure is as follows:

.jieshao{
    width: 1080px;
    height: 551px;
    margin: auto;
    overflow: hidden;
}
.swiper-slide{
    box-shadow: 0px 0px 20px 0px rgba(0.0.0.0.05);
    border-radius: 26px;
    position: relative;
    height: 551px;
}
.swiper-img{
    position: absolute;
    width: 100%;
    height: 551px;
    border-radius: 26px;
}
.lay-pop{
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.lay-pop-box{
    position: absolute;
    width: 100%;
    height: 100%;
    background: # 000000;
    border-radius: 26px;
    opacity: 0.18;
}
.lay-pop .title{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    padding: 25px 30px 14px 40px;
    position: relative;
    z-index: 1;
}
.lay-pop .desc{
    width: 100%;
    height: 112px;
    font-size: 12px;
    font-weight: 400;
    padding: 0 30px 10px 40px;
    margin-bottom: 24px;
    color: #fff;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break - all;position: relative;
    z-index: 1;
}
.swiper-slide-prev {
    transform: scale(0.9);
    opacity: 0.3;

}
.swiper-slide-next {
    transform: scale(0.9);
    opacity: 0.3;
}

.swiper-slide .lay-pop{
  display: none;
}
.swiper-slide-active .lay-pop{
  display: block;
}
Copy the code

Js structure

The js structure is as follows:

var mySwiper = new Swiper ('.swiper-container2', {
    autoplay: {
      delay: 3000.disableOnInteraction: false,},slidesPerView: 3.spaceBetween: 2.centeredSlides: true.centeredSlidesBounds: true.observer: true.// Automatically initializes swiper when it modifies itself or its child elements
    observeParents: true.// Swiper is automatically initialized when its parent element is modified
    loop: true,})Copy the code

The slidesPerView is used to display the number of trancasts, and the swiper-slide-prev and swiper-slide-next class names are used to reduce the number of trancasts, so as to achieve the effect of large in the middle and small on both sides. If you want to adjust the upper and lower positions of the two wheels, you can use translateY() to do this.

Vue implementation

There are still a few pits in the use of VUE, we need to pay attention to.

The installation

First install the NPM I Swiper package.

The introduction of

The latest version of Swiper I have installed is 6.3.5. If it is 6.x, it is important to note that if you need a pager or automatic rotation, you will need to introduce the corresponding components in Swiper.

import 'swiper/swiper-bundle.css'
import Swiper, { Pagination, Navigation, Autoplay } from 'swiper';
Swiper.use([Pagination, Navigation, Autoplay]);
Copy the code

use

<div v-if="images.length" class="banner"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="item of images" :key="item.id"> <img class="banner-image" :src="item.image" alt="" /> <! -- <div class="title">{{ image }}</div> --> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div>Copy the code

SwiperOptions configuration:

swiperOptions: { pagination: { el: ".swiper-pagination", }, autoplay: { delay: 3000, disableOnInteraction: False,}, effect: "coverflow", slidesPerView: 1.2, spaceBetween: 2, loopedSlides: 5, centeredSlides: True, centeredSlidesBounds: true, observer: true, // Automatically initialize swiper observeParents when modifying swiper itself or child elements: True, // Automatically initialize swiper loop when modifying the parent element: true,},Copy the code

<style lang="scss">
.home {
  .swiper-slide {
    width: 340px;
    background-color: #ebedf0;
    border-radius: 6px;
    .banner-image {
      border-radius: 6px; }}.swiper-slide-prev {
    transform: scale(0.9);
  }
  .swiper-slide-next {
    transform: scale(0.9);
  }

  .swiper-container {
    --swiper-theme-color: #fff;
  }
  .swiper-pagination.swiper-pagination-bullets {
    width: auto;
    right: 60px;
    text-align: right;
  }
  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 4px;
  }
  .swiper-pagination-bullet-active {
    width: 20px;
    height: 6px;
    border-radius: 5px;
  }
}
</style>
Copy the code

The effect

The results are as follows: