swiper问题缩略图

Question

swiper缩略图居中，主图有slideToClickedSlide配置，点击后将图片居中，但是缩略图没这个配置。
从第三张开始，点击让缩略图居中，除了最后两张不用管。用js控制过渡不管用啊。显示的是Swiper.css控制的thumbs的translate3d( ) ，求解答

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

看起来你在使用Swiper库，并且遇到了缩略图居中显示的问题。你提到点击缩略图时主图可以居中显示，但缩略图本身没有这个功能。同时你也提到了使用JavaScript控制过渡没有效果的问题。下面是一些可能的解决方案和建议：

解决方案：

1. 使用Swiper的事件和API来实现缩略图的点击跳转：

• 利用Swiper的事件（例如slideChange或click）结合其API方法（例如slideTo或update）来实现缩略图的点击跳转功能。你可以在缩略图的点击事件中添加逻辑来调用这些方法。

示例代码：

假设你有一个带有id为thumbnail-container的缩略图容器和主图的Swiper实例名为swiperMain。你可以这样做：

const thumbnails = document.querySelectorAll('#thumbnail-container .swiper-slide'); // 获取所有缩略图元素
thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('click', function() {
    const index = parseInt(this.dataset.index); // 获取缩略图的索引值（假设你已经在每个缩略图上设置了索引值）
    if (index >= 2 && index < thumbnails.length - 1) { // 检查索引是否在第三张到倒数第二张之间
      swiperMain.slideToSlide(index); // 使用slideToSlide方法跳转到对应的索引位置
      swiperThumbs.update(); // 更新缩略图的显示状态（假设这是你的缩略图Swiper实例名）
    }
  });
});

2. 检查CSS样式和过渡效果：

• 确保你的CSS样式允许缩略图进行正确的过渡效果。特别是检查.swiper-container和其他相关元素的样式，确保它们没有阻止缩略图的正确显示和过渡。你可能需要调整CSS属性如transform或transition来确保它们正常工作。如果你已经尝试了JS控制过渡但没有效果，可能是因为CSS中的某些设置覆盖了JS的控制。
• 使用开发者工具（如Chrome DevTools）检查缩略图的样式和计算后的属性，以确认是否有冲突的样式导致问题。你也可以尝试重写或覆盖这些冲突的样式。同时，查看是否有其他第三方库或插件可能会影响Swiper的正常表现。清理和排查这些问题可能会有助于解决问题。另外请确认是否有其他地方改变了你的DOM结构，可能也会影响到布局和样式表现。另外还需要注意确认是否在调用update()函数来确保修改内容或DOM结构后更新了布局计算。有时候修改DOM结构后需要调用这个方法来更新布局计算，否则可能会出现预期外的表现。你可以尝试在添加或修改DOM元素后调用此方法来尝试解决问题。有时候swiper的版本也会影响API的功能实现和使用，注意版本问题导致的方法变化或使用错误的情况。