如何解决如何切换到类别 swiperjs 中的第一张照片
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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1475415949483-6d6590e8d475?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1526931072202-5ba10196c45d?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1498409414967-907800891615?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=963&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=634&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=634&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=911&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=867&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&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&ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&auto=format&fit=crop&w=867&q=80" alt="" /></a>
</div>
</div>
<div class="gallery-nav">
<div class="gallery__prev">prev</div>
<div class="gallery__next">next</div>
</div>里面有一个slider，有2类图片，有的有Exterior属性，有的有Interior（也许有一个选项来划分它们，而不是为每张图片设置一个属性）。滚动到另一个类别的照片，我们更改了该点的突出显示。
问题：如何通过单击项目滚动到相应类别的第一张照片。无法绑定 Slideto 和属性。
解决方法
最好使用支持原生点击的元素，例如 <a> 或 <button>。在本例中，我使用了 <button>，因为该功能不需要任何导航。
给 button 一个 value 属性。此属性的值应为按钮所代表的 type。
首先侦听 click 元素上的 .toggle-btn 事件。单击后，从按钮中获取 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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1534804101463-987ef0c79d54?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1475415949483-6d6590e8d475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1526931072202-5ba10196c45d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80" alt="" /></a>
<a class="swiper-slide" data-type="exterior"><img src="https://images.unsplash.com/photo-1498409414967-907800891615?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=963&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=911&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=867&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=867&q=80" alt="" /></a>
<a class="swiper-slide" data-type="interior"><img src="https://images.unsplash.com/photo-1521334884684-d80222895322?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=867&q=80" alt="" /></a>
</div>
</div>
<div class="gallery-nav">
<div class="gallery__prev">prev</div>
<div class="gallery__next">next</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
