temp

src/components/Index/TopSwiper.js → src/components/Index/TopSwiper/index.js

 import React, { Component } from 'react';
 import Swiper from 'swiper'
+import './index.scss'
 import 'swiper/dist/css/swiper.min.css'
 
-class TopSwiper extends Component {
+class Index extends Component {
     container = null
     swiper
 
     componentDidMount() {
+        const {bannerList} = this.props
+        const _this = this
         this.swiper = new Swiper('.swiper-container', {
             direction: 'horizontal',
             loop: true,
-            on:{
-                progress(e){
-                    console.log(e);
+            spaceBetween: 12,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            loopedSlides: 2,
+            on: {
+                sliderMove() {
+
                 }
+
             }
         })
     }
@@ -21,7 +29,7 @@ class TopSwiper extends Component {
     render() {
         const {bannerList} = this.props
         return (
-            <div className={'swiper-container index-swiper'} ref={el => this.container = el}>
+            <div className={'swiper-container'} ref={el => this.container = el}>
                 <ul className="swiper-wrapper">
                     {bannerList.length && bannerList.map((item, index) => {
                         return (
@@ -36,4 +44,4 @@ class TopSwiper extends Component {
     }
 }
 
-export default TopSwiper;
\ No newline at end of file
+export default Index;
\ No newline at end of file

src/components/Index/TopSwiper/index.scss

+.swiper {
+    &-container {
+        padding: 0 20px !important;
+    }
+
+    &-slide {
+        transform: scale3d(1,0.9,1);
+
+        img {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        &-active {
+            width: 335px !important;
+            height: 168px !important;
+            transform: scale3d(1, 1, 1);
+
+            img {
+                width: 100% !important;
+                height: 100% !important;
+            }
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file