swiper半圆形旋转

最新推荐文章于 2024-04-24 09:27:42 发布

张云，

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量859

点赞数

分类专栏： javascript swiper 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/buzhidjiaosha/article/details/124377608

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

swiper

6 篇文章 0 订阅

订阅专栏

引入swiper-bundle.css和swiper-bundle.min.js

jq引入本地的就行了

  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
  <script src="jquery-1.8.3.min.js"></script>  //
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

HTML

做的动态插入，可以直接写入slide

          <div class="swiper swiper-3d">
              <div class="swiper-wrapper">

              </div>
          </div>

CSS

.swiper{width:660px;position:absolute;left:1022px;height:600px;top:105px;}
.map{display: block;position: absolute;left: 828px;top: 65px;width: 355px;height: 718px}
.swiper-slide{width:310px;height:80px;margin:20px 0;}
.swiper-slide img{width:.80px;height:80;display: block;float: left;transition: all 0.5s}
.swiper-slide p{color: #fff;line-height:72px;text-align:center;font-size: 28px;float: right;width: 200px;height: 72rem;transition: all 0.5s;background-size:100% 100%}
.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:none!important;}

JS

    function getList() {
        let data = [{
            text: '系统1',
            img: 'images/icon12_1.png'
        }, {
            text: '系统2',
            img: 'images/icon12_1.png'
        }, {
            text: '系统3',
            img: 'images/icon12_1.png'
        }, {
            text: '系统4',
            img: 'images/icon12_1.png'
        }, {
            text: '系统5',
            img: 'images/icon12_1.png'
        }, ]
        var strSwiper = ''
        data.forEach(item => {
            strSwiper += `<div class="swiper-slide">
                            <img src="${item.img}" alt="">
                            <p>${item.text}</p>
                    </div>`
        })
        $(".swiper-wrapper").html(strSwiper)
        slideW = 300;
        carouselSwiper = new Swiper('#carousel .swiper', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: false,
            mousewheel: true,
            loop: true,
            loopedSlides: 20,
            direction: 'vertical',
            grabCursor: true,
            //	autoplay: true,
            on: {
                progress: function(swiper, progress) {
                    for (i = 0; i < this.slides.length; i++) {
                        var slideProgress = this.slides[i].progress;
                        translateX = (slideProgress - 5) * (slideW / 12 - Math.cos((slideProgress + 2.2) * 0.125 * Math.PI) * slideW * 1.1 / 8) + 'px';
                        this.slides.eq(i).transform('translateX(' + translateX + ')');
                    }
                },
                setTransition: function(swiper, transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }

                }
            }

        })
    }
    //调用方法
     getList();