swiper 设置direction: 'vertical' 怎么计算是弧形

<!--
    Swiper 预祝北京2022年冬奥会和冬残奥会成功举办
    Swiper 为北京2022年冬奥会官网（https://www.beijing2022.cn/）提供轮播图技术支持
    本轮播图版权所有 swiper中文网（https://www.swiper.com.cn/）
-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>环形旋转木马视图切换</title>
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="carousel.css">
    <script src="swiper/swiper-bundle.min.js"></script>
</head>
<body>
    <div id="carousel">
        <div class="swiper swiper-3d">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/carousel01.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel02.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel03.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel04.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16                 
        radius = slideW * 0.5 / Math.sin(Math.PI / 16);//半径。圆心并不是视点中心，视点在1200px
        carouselSwiper = new Swiper('#carousel .swiper', {
            direction: 'vertical',
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: false,
            loop: true,
            loopedSlides: 8,
            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 (i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
                        rotateY = (slideProgress + 1.5) * 22.5;//图片角度
                        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);
                    }
                }
            }

        })
    </script>
</body>

</html>

引用gpt回答有帮助的话采纳一下
Swiper 在垂直方向(direction:'vertical')时实现环形旋转的计算逻辑如下:

计算每张图片的角度间隔
这里一共8张图片,每张图片的角度间隔为360度/8=45度
计算图片中心到视点的距离(z轴距离)
设图片宽度为w,则图片中心到视点距离约为w/2×tan(角度/2)
计算图片的x轴偏移量
x轴偏移量需要根据当前进度增加,使图片间距不均匀,形成弧形
设置transform属性
将计算得到的角度rotateY、x轴偏移translateX、z轴偏移translateZ都设置到slide的transform属性上,实现3D效果。
关键代码:
js

// 每张图片角度 
var angle = slideProgress * 45; 

// z轴偏移
var translateZ = (w/2) * Math.tan(angle/2);

// x轴偏移
var translateX = slideProgress * offset; 

// 设置transform属性
slide.transform(`
  translateX(${translateX}px)
  translateZ(${translateZ}px)
  rotateY(${angle}deg)
`);

通过计算角度和坐标偏移,并应用3D变换,Swiper可以实现垂直方向的环形旋转效果

这篇文章：swiper6.0改造 “翻页按钮”：自定义style样式和position - 案例篇也许有你想要的答案，你可以看看
除此之外, 这篇博客: 关于 SwiperJS 的初次使用中的 1. direction：滑动方向 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
参数
- horizontal ：（默认）水平方向
- vertical：垂直方向
以下回答由chatgpt基于相关博客总结生成:
问题描述中提到要将swiper插件的方向设置为垂直方向，并实现一个弧形效果。根据参考资料，需要使用Swiper插件来实现轮播图的效果。针对这个问题，我将给出以下解决方案：
步骤一：引入Swiper插件文件
首先，需要在HTML页面中引入Swiper插件的相关文件，包括CSS和JavaScript文件。
```
<link rel="stylesheet" href="path/to/swiper.css">
<script src="path/to/swiper.js"></script>
```
步骤二：设置HTML结构
在HTML中创建一个包含轮播图的容器，并在其中添加轮播图的图片。还需要为分页器和导航按钮创建对应的HTML元素。
```
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="path/to/image1.jpg"></div>
    <div class="swiper-slide"><img src="path/to/image2.jpg"></div>
    <div class="swiper-slide"><img src="path/to/image3.jpg"></div>
    ...
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
```
步骤三：初始化Swiper对象
在JavaScript中，使用Swiper构造函数创建一个Swiper对象，并传入一个包含选择器的参数，选择器指定轮播图容器的类名或ID。
```
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 设置滑动方向为垂直方向
  loop: true, // 开启循环模式
  // 其他配置选项...
});
```
步骤四：添加样式
为了实现弧形效果，可以通过添加自定义样式来修改Swiper的样式。可以使用CSS中的transform属性实现弧形效果。
```
.swiper-slide {
  /* 添加弧形样式 */
  transform: rotateX(30deg);
  transform-origin: top center;
}
```
至此，通过以上步骤，我们完成了将方向设置为垂直并实现弧形效果的Swiper插件初始化和样式设置。根据实际情况，你还可以根据参考资料中提供的API文档来调整其他配置选项，如自动轮播、分页器等功能。