swiper自定义样式-发展时间线

实现效果

<div class="swiper-container swiper1">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
            <div class="item-box">
                  2014
                    <ul class="u-c-30 u-fs14">
                       <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                       <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                     </ul>
            <div class="point"></div>
          </div>

          </div>
          <div class="swiper-slide">
              <div class="item-box">
                   2015
                  <ul class="u-c-30 u-fs14">
                     <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                      <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                  </ul>
               <div class="point"></div>
             </div>
            </div>
          <div class="swiper-slide">
              <div class="item-box">
                  2016
                 <ul class="u-c-30 u-fs14">
                     <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                     <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                  </ul>
                <div class="point"></div>
                </div>
              </div>
           <div class="swiper-slide">
              <div class="item-box">
                                        2017
                <ul class="u-c-30 u-fs14">
                   <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                   <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                </ul>
               <div class="point"></div>
              </div>
            </div>
           <div class="swiper-slide">
              <div class="item-box">
                                        2018
                <ul class="u-c-30 u-fs14">
                   <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                   <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                </ul>
               <div class="point"></div>
             </div>
            </div>
           <div class="swiper-slide">
              <div class="item-box">
                                        2019
                <ul class="u-c-30 u-fs14">
                   <li>・The position: static property prevents z-index from having an effect.
                                                Try setting position to something other than static. </li>
                   <li>・The position: static property prevents z-index from having an effect.
                                                .</li>
                 </ul>
               <div class="point"></div>
              </div>
            </div>
           </div>
            <div class="swiper-button-prev">
                <i class="el-icon-back"></i>
            </div>
            <div class="swiper-button-next">
               <i class="el-icon-right"></i>
            </div>
            <div class="img-box">
                <img src="../images/about03.png" />
            </div>
             <div class="u-df-ct u-mt30">

                </div>
             </div>

.swiper1 {
width: 100%;
height: auto;
padding: 90px 0;
margin-left: auto;
margin-right: auto;
/* 单独设置按钮颜色 */
--swiper-navigation-size: 0;

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
text-align: left;
}

.swiper-pagination-bullet {
height: 10px;
width: 10px;
}

.swiper-button-next,
.swiper-button-prev {
z-index: 100;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #fff;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
right: 0;
margin-top: -40px;

.el-icon-back,
.el-icon-right {
    font-size: 25px;
    color: #fff;
}
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #104EBF;
color: #fff;
border: none;
}

.swiper-slide {
text-align: center;
font-size: 100px;
/* background: #fff; */
height: 200px;
font-family: DIN, DIN;
font-weight: bold;
color: #104EBF;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition-property: all;

.item-box {
    position: relative;
}

ul {
    width: 50vw;
    font-size: 15px;
    color: #525a62;
    font-family: Adobe Heiti Std;
    position: absolute;
    left: -110%;
    bottom: -143px;
    opacity: 0;
    text-align: left;

    li {
        line-height: 30px;

    }
}

.point {
    position: absolute;
    bottom: -55px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #009994;
    border-radius: 50%;
    opacity: 0;

}
}

.swiper-slide-active {
    color: #009994;

    ul {
        opacity: 1 !important;
        transition: all 2s;
    }

    .point {
        opacity: 1 !important;
        transition: all 7s;
    }
}

}

var swiper = new Swiper('.swiper1', {
            loop: false,
            speed: 2500,
            slidesPerView: 5,
            spaceBetween: 30,
            centeredSlides: true,
            watchSlidesProgress: true,
            on: {
                setTranslate: function () {
                    slides = this.slides;
                    for (i = 0; i < slides.length; i++) {
                        slide = slides.eq(i)
                        progress = slides[i].progress
                        slide.css({ 'opacity': '', 'background': '' }); slide.transform('');//清除样式
                        slide.transform('scale(' + (1 - Math.abs(progress) / 4) + ')');
                        slide.css('opacity', (1 - Math.abs(progress) / 6));
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                },
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        });