The target style

Note: Swiper6 was used in this article

implementation

First, use NPM to install Swiper. Note that Swiper is lowercase.

npm install --save swiper

Next, introduce Swiper and other components that need to be used in the project. The above requirements only need Swiper SwiperSlide. The component code is as follows:

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

import './index.scss';

export default() = > {return (
        <div className='container'>
            <Swiper
                className='swiper_container'
                slidesPerView='auto'
                centeredSlides={true}
            >
                <SwiperSlide className='card'>Slide 1</SwiperSlide>
                <SwiperSlide className='card'>Slide 2</SwiperSlide>
                <SwiperSlide className='card'>Slide 3</SwiperSlide>
            </Swiper>
        </div>
    );
}
Copy the code

Style:

.container { width: 100%; height: 100%; background: #1ACEA1; background-size: 100% 100%; padding-top: 1rem; . Swiper_container {height: 9.2 rem; width: 100%; .card { text-align: center; Width: 16.8 rem; Height: 9.2 rem; Background: rgba($color: #000, $alpha: 0.3); Border: 0.1 REM solid rgba(0, 0, 0, 0.08); box-sizing: border-box; Border - the radius: 1.2 rem; transition: 300ms; The transform: scale (0.87); &:last-child { margin-right: 0; } } .swiper-slide-active, .swiper-slide-duplicate-active{ transform: scale(1); }}}Copy the code

To achieve the effect of small on both sides and large in the middle, the core idea is as follows:

  1. Swiper componentsslidesPerViewValue is set toauto;
  2. centeredSlides={true}Is the card center key, default is left;
  3. Zoom out the default card. The currently selected card is a normal multiple. After the zoom out is set, the space between cards is automatically left.

If you set the value to a number, Swiper forces the swiper-Slide element to be the total container width /slidesPerView value. SlidesPerView ={1}

That’s it for the target style