使用jquery在图像上单击箭头时切换图像

Question

我正在尝试创建用户查看产品滚动图像的能力，点击图片上的箭头。

基本上，图像将切换到点击图片上的侧箭头。

是他们允许实现此功能的任何js库或脚本吗?

谢谢你

Answer 1

看起来你在找swiper.js。

设置非常简单:将此包含在文档的开头

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

而不是将图像添加到滑动幻灯片元素中。

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Image 1</div>
        <div class="swiper-slide">Image 2</div>
        <div class="swiper-slide">Image 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

设置所需的大小

.swiper-container {
    width: 600px;
    height: 300px;
}

最后，在脚本标记中初始化它。

<script>
var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})
</script>

所有这些在指南中都有很好的解释。