问题描述
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>