实现swiper环形旋转木马轮播图

Question

**问题遇到的现象和发生背景 :**项目需要一个轮播图，在swiper官网看到在线演示的“环形旋转木马视图切换”这个轮播图，复制代码后出现问题

**问题相关代码，请勿粘贴截图 **

 <div id="carousel">
      <div class="swiper swiper-3d">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../../assets/images/1.jpg" />
            <p>北京冬奥会迎来倒计时一个月</p>
          </div>
          <div class="swiper-slide"><img src="../../assets/images/2.jpg" />
            <p>北京冬奥会迎来倒计时一个月</p>
          </div>
          <div class="swiper-slide"><img src="../../assets/images/3.jpg" />
            <p>北京冬奥会迎来倒计时一个月</p>
          </div>
          <div class="swiper-slide"><img src="../../assets/images/4.jpg" />
            <p>北京冬奥会迎来倒计时一个月</p>
          </div>
          <div class="swiper-slide"><img src="../../assets/images/5.jpg" />
            <p>北京冬奥会迎来倒计时一个月</p>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import Swiper from 'swiper';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    const slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
    const radius = slideW * 0.5 / Math.sin(Math.PI / 16);//半径。圆心并不是视点中心，视点在1200px

    const carouselSwiper = new Swiper('#carousel .swiper', {
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: false,
      loop: true,
      loopedSlides: 4,
      grabCursor: true,
      //    autoplay: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        //clickable :true,
      },
      on: {
        progress: function (swiper, progress) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            const translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
            const rotateY = (slideProgress + 1.5) * 22.5;//图片角度
            const translateZ = (radius - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * radius - 150) + 'px';//调整图片远近，刚好4个在画框内
            slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

          }
        },
        setTransition: function (swiper, transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }

        }
      }

    })

  }

}

** 运行结果及报错内容 :**

** 我想要达到的结果:**

Answer 1

打印this.slides看看 应该就是这个的问题 。你在data里声明了吗（angluar里我不知道咋写，但你用this.xxx就要声明）？