e.target.dataset.followerStylee.target? Ну, когда вы наводите курсор на слайд с data-атрибутом. На тот слайд, который не видно за вложенной в него картинкой.target хватать, а пытаться найти у него предка с нужным вам атрибутом.
nextEl: prevRef.currentconst [ swiper, setSwiper ] = useState();<Swiper
onSwiper={setSwiper}
...- ref={prevRef}
+ onClick={() => swiper.slidePrev()}const [ autoplay, setAutoplay ] = useState(false);
const swiper = useRef();
useEffect(() => {
swiper.current.autoplay[autoplay ? 'start' : 'stop']();
}, [ autoplay ]);<input
type="checkbox"
checked={autoplay}
onChange={e => setAutoplay(e.target.checked)}
/><Swiper
onSwiper={instance => swiper.current = instance}
...
><script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>
<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>Вроде делаю как в документации
get the Swiper instance in components inside of Swiper
import { ref } from 'vue';setup() {
const swiper = ref();
return {
swiper,
onSwiper: instance => swiper.value = instance,
...
};
},<swiper
@swiper="onSwiper"
...
>import { Navigation } from 'swiper';.modules: [ Navigation ],.
const [ text, setText ] = useState('');
const [ swiper, setSwiper ] = useState(null);
useEffect(() => {
if (swiper && text какой там вам нужен) {
swiper.slideNext();
}
}, [ swiper, text ]);<Swiper
onSwiper={setSwiper}
...<input
value={text}
onChange={e => setText(e.target.value)}
...swiper.on('slideChange', ({ activeIndex }) => {
document.querySelectorAll('.points .point').forEach((n, i) => {
n.classList.toggle('active', i === activeIndex);
});
})
document.querySelector('.points').addEventListener('click', ({ target: t }) => {
if (t.classList.contains('point')) {
swiper.slideTo([...t.parentNode.children].indexOf(t));
}
});pagination: {
el: '.points',
bulletClass: 'point',
bulletActiveClass: 'active',
renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
clickable: true,
},card_gallery.on('click', function(swiper, e) {
const index = swiper.slides.indexOf(e.target.closest('.swiper-slide'));
if (index !== -1) {
single_gallery.slideTo(index);
}
});slideToClickedSlide: true в настройки card_gallery.
select.addEventListener('change', function() {
swiper.slideTo(this.selectedIndex);
});swiper.params.slidesPerView = новое количество отображаемых слайдов;
swiper.update();import { Lazy } from 'swiper';. Этого вы не сделали.SwiperCore.use([ Lazy ]);. Этого вы не сделали.<Swiper lazy={true}>. Этого вы не сделали.swiper-lazy, атрибут src заменить на data-src. Ну, хоть это у вас есть.
on: {
breakpoint() {
this.el.classList.toggle('класс', this.slides.length < this.params.slidesPerView);
},
},const counterSelector = 'селектор элементов внутри слайдов, где должны отображаться их номера';document.querySelectorAll(counterSelector).forEach((n, i, a) => {
n.textContent = `${i + 1} / ${a.length}`;
});const swiper = new Swiper(...);), или среди его настроек отсутствует loop: true. В противном случае для вычисления количества слайдов придётся отбросить дубликаты, а индексы надо будет доставать из data-атрибута (UPD. Неактуально, начиная с девятой версии - дублирования слайдов больше нет):const slidesCount = swiper
.slides
.filter(n => !n.matches('.swiper-slide-duplicate'))
.length;
swiper.slides.forEach(n => n
.querySelector(counterSelector)
.innerText = `${-~n.dataset.swiperSlideIndex} / ${slidesCount}`
);нужно отлавливать дата атрибуты и если эти дата атрибуты совпадают с дата атрибутами других блоков то вешать класс на блоки
on: {
slideChange() {
const index = this.realIndex;
document.querySelectorAll('.lol').forEach((n, i) => n.classList.toggle('active', i === index));
},
},.clients__picture все .lol, вырезаете обработчик slideChange, добавляетеpagination: {
el: '.clients__picture',
bulletClass: 'lol',
bulletActiveClass: 'active',
renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
},swiper-container-initialized, можно назначать нужные стили в зависимости от его наличия:.swiper-container:not(.swiper-container-initialized) {
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
display: none;
}
}почему-то не работает
new Swiper?