不用swiper组件，用swiper原生写轮播图

对于不使用swiper组件，而是使用swiper原生方式编写轮播图，可以按照以下步骤进行：

1. 引入swiper库：在HTML文件中，使用`<script>`标签引入swiper库的CDN链接或者下载swiper库文件并引入。

2. 创建HTML结构：在页面中创建一个包含轮播图的容器元素，例如一个`<div>`元素。在该容器内部，创建一个包含轮播项的父容器，例如一个`<ul>`元素。每个轮播项使用`<li>`元素表示。

3. 设置CSS样式：根据需要设置容器元素和轮播项的样式，例如设置容器元素的宽度和高度，以及轮播项的宽度和高度。

4. 初始化swiper：在JavaScript中，使用`new Swiper()`来创建一个swiper实例，并传入相关的参数，例如容器元素的选择器、轮播项的选择器、以及其他配置选项。

5. 配置swiper选项：根据需要，可以配置swiper的各种选项，例如轮播方向、自动播放、循环播放等。具体的配置选项可以参考swiper官方文档。

6. 定义样式和动画：根据需要，可以自定义轮播项的样式和动画效果。可以使用CSS过渡、动画或JavaScript来实现。

7. 编写交互逻辑：根据需要，可以编写一些交互逻辑，例如点击按钮切换轮播项、鼠标悬停停止轮播等。可以通过监听swiper实例的一些事件来实现。

通过以上步骤，你可以使用swiper原生方式编写轮播图，实现自定义的样式和交互效果。请注意，以上步骤仅为一个基本的示例，具体实现方式根据需求可能会有所不同。

相关问题

微信原生小程序轮播图去小圆点

要移除微信原生小程序轮播图组件中的小圆点指示器，可以通过设置 `indicator-dots` 属性为 `false` 来实现。

<swiper indicator-dots="{{false}}" class="swiper">
  <swiper-item>
    <image src="图片地址" class="slide"></image>
  </swiper-item>
  <swiper-item>
    <image src="图片地址" class="slide"></image>
  </swiper-item>
  <!-- 添加更多的 swiper-item 和 image -->
</swiper>

设置 `indicator-dots` 属性为 `false` 将隐藏轮播图中的小圆点指示器。

同时，你可以根据实际需求对轮播图进行样式调整，以适应你的设计。

微信原生小程序轮播图实现Y轴播放

要实现在Y轴上播放的轮播图效果，可以通过使用 `swiper` 组件和自定义动画来实现。

首先，在小程序的页面中添加 `swiper` 组件，并设置 `vertical` 属性为 `true`，以实现垂直方向的滑动效果。

<swiper vertical="{{true}}" class="swiper">
  <swiper-item>
    <image src="图片地址" class="slide"></image>
  </swiper-item>
  <swiper-item>
    <image src="图片地址" class="slide"></image>
  </swiper-item>
  <!-- 添加更多的 swiper-item 和 image -->
</swiper>

然后，在样式文件中设置 `swiper` 和 `slide` 的样式，以控制轮播图的布局和动画效果。

.swiper {
  height: 100%; /* 设置轮播图容器的高度 */
}

.slide {
  height: 100vh; /* 设置每个轮播项的高度，这里使用视口高度作为高度值 */
  animation: slideAnimation 10s infinite linear; /* 自定义动画，控制滑动效果 */
}

@keyframes slideAnimation {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%); /* 控制每次滑动的距离 */
  }
}

通过以上方法，可以实现在Y轴上播放的轮播图效果。你可以根据实际需求修改样式和动画参数来达到所期望的效果。