如何切换到类别swiperjs中的第一张照片

Question

https://jsfiddle.net/Gorotto/mtcjxyg3/2/

$(document).ready(function() {

  var swiperGallerySlider = new Swiper('.gallery-slider', {
    slidesPerView: 3,
    slidesPerColumn: 2,
    speed: 500,
    spaceBetween: 30,
    slidesPerGroup: 3,
    observer: true,
    // slideToClickedSlide: true,
    observeParents: true,
    init: true,
    navigation: {
      nextEl: '.gallery__next',
      prevEl: '.gallery__prev',
    },
  });

  $('.toggle-wrap').attr("data-class", $('.gallery-slider .swiper-slide-active').data('type'));

  var updatetype = function(index) {
    $('.toggle-wrap').attr("data-class", $('.swiper-slide-active').data('type'));
    return false;
  };

  swiperGallerySlider.on('slideChangeTransitionStart', function(realIndex) {
    updatetype();

  });

});

.gallery-slider {
  width: 100%;
  height: 300px;
  display: flex;
  margin-top: 40px;
}

.swiper-slide {
  height: calc((100% - 30px) / 2);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-class=exterior] .toggle-btn:first-of-type {
  color: red;
  font-weight: 400;
}

[data-class=interior] .toggle-btn:last-of-type {
  color: red;
  font-weight: 400;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.8/swiper-bundle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.8/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-wrap current"><span class="toggle-btn">Экстерьер</span><span class="toggle-btn" id="ter">Интерьер</span></div>
<div class="gallery-slider swiper-container">
  <div class="swiper-wrapper">
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1475415949483-6d6590e8d475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1526931072202-5ba10196c45d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=675&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1498409414967-907800891615?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=963&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1567016376408-0226e4d0c1ea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1567016376408-0226e4d0c1ea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1601628828688-632f38a5a7d0?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=911&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
  </div>
</div>
<div class="gallery-nav">
  <div class="gallery__prev">prev</div>
  <div class="gallery__next">next</div>
</div>

里面有一个滑块，有2类图片，其中一些具有外部属性，其他具有内部属性（也许有一个选项可以将它们分开而不是为每张图片设置一个属性).滚动到另一个类别的照片，我们更改该点的突出显示。

问题：如何通过点击一个项目滚动到相应类别的第一张照片。无法绑定 SlideTo 和属性。

Answer 1

最好使用支持原生点击的元素，例如 <a> 或 <button>。在这种情况下，我使用了 <button>，因为该功能不需要任何导航。

给 button 一个 value 属性。此属性的值应为按钮所代表的 type。

首先侦听 .toggle-btn 元素上的 click 事件。单击时，从按钮中获取 value。然后过滤幻灯片，以便我们只有基于我们单击的按钮 data-type="..." 的元素。

然后从过滤后的列表中获取第一个元素。获取该元素在所有幻灯片列表中的索引并滑动到索引。

$(document).ready(function() {

  const $slides = $('.swiper-slide');

  var swiperGallerySlider = new Swiper('.gallery-slider', {
    slidesPerView: 3,
    slidesPerColumn: 2,
    speed: 500,
    spaceBetween: 30,
    slidesPerGroup: 3,
    observer: true,
    // slideToClickedSlide: true,
    observeParents: true,
    init: true,
    navigation: {
      nextEl: '.gallery__next',
      prevEl: '.gallery__prev',
    },
  });

  $('.toggle-wrap').attr("data-class", $('.gallery-slider .swiper-slide-active').data('type'));

  var updatetype = function(index) {
    $('.toggle-wrap').attr("data-class", $('.swiper-slide-active').data('type'));
    return false;
  };

  swiperGallerySlider.on('slideChangeTransitionStart', function(realIndex) {
    updatetype();
  });
  
  $('.toggle-btn').on('click', function(event) {
    const $this = $(this);
    
    // Get the value of the button that has been clicked.
    const type = $this.val();
    
    // Get only the slides with a specific data-type.
    const $filteredSlides = $slides.filter(`[data-type="${type}"]`);
    
    // Get the first slide with that type.
    const $firstSlide = $filteredSlides.first();
    
    // Get the index of the first slide.
    const firstSlideIndex = $slides.index($firstSlide);
    
    // Slide to the index.
    swiperGallerySlider.slideTo(firstSlideIndex);
    event.preventDefault();
  });
});

.gallery-slider {
  width: 100%;
  height: 300px;
  display: flex;
  margin-top: 40px;
}

.swiper-slide {
  height: calc((100% - 30px) / 2);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-class=exterior] .toggle-btn:first-of-type {
  color: red;
  font-weight: 400;
}

[data-class=interior] .toggle-btn:last-of-type {
  color: red;
  font-weight: 400;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.8/swiper-bundle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.8/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-wrap current"><button class="toggle-btn" value="exterior">Экстерьер</button><button class="toggle-btn" id="ter" value="interior">Интерьер</button></div>
<div class="gallery-slider swiper-container">
  <div class="swiper-wrapper">
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1475415949483-6d6590e8d475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1526931072202-5ba10196c45d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=675&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1498409414967-907800891615?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=963&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1567016376408-0226e4d0c1ea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1567016376408-0226e4d0c1ea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1601628828688-632f38a5a7d0?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=911&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" /></a>
    <a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=867&amp;q=80" alt="" /></a>
  </div>
</div>
<div class="gallery-nav">
  <div class="gallery__prev">prev</div>
  <div class="gallery__next">next</div>
</div>

如何切换到类别swiperjs中的第一张照片

How to switch to the first photo in a category swiperjs

javascript

jquery

swiper