Open cnairi opened 5 years ago
Hi, I have the same problems with the pagination. I wanted to have the bullet type pagination, but it doesn't seems to work..
I tried several things to make it work but still no luck :(
Hey @nindyahapsari I've finally managed to implement it :)
I'm currently at work but I'll create a sandbox working demo asap !
hi @cnairi ,
I just found a temporary solution but im not sure if it's the best one.
What I did was, I just style the ".swiper-pagination-bullets" and the ".swiper-pagination-bullet" in CSS. Some how it works, it shows me the bullet paginations.
But maybe you have a better solutions for that.
Looking forward for your demo :)
@cnairi could you share a solution please?
Hello @mlvrkhn,
I'm not working for the same company anymore.
I manage to find the code, but it seems reallyyy old (and needs to be cleaned)... The version of react-id-swiper was 2.4.0
.
Here it is :
import React, { memo, useEffect} from 'react';
import css from 'client:styles/components/step/content/storiesSlider.scss';
import ReactIdswiper from 'react-id-swiper';
const cx = classNames.bind(css);
export default memo(({children}) => {
const params = {
initialSlide: 0,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
spaceBetween: 0,
loop: true,
on: {
init() {
const mySwiper = document.querySelector('.swiper-container').swiper;
mySwiper.realIndex = 0;
mySwiper.slideToLoop(mySwiper.realIndex, 0, false);
},
slideChangeTransitionStart() {
const mySwiper = document.querySelector('.swiper-container').swiper;
let $wrapperEl = mySwiper.$wrapperEl;
let params = mySwiper.params;
$wrapperEl.children(('.' + (params.slideClass) + '.' + (params.slideDuplicateClass)))
.each(function () {
let idx = this.getAttribute('data-swiper-slide-index');
this.innerHTML = $wrapperEl.children('.' + params.slideClass + '[data-swiper-slide-index="' + idx + '"]:not(.' + params.slideDuplicateClass + ')').html();
});
},
slideChangeTransitionEnd() {
const mySwiper = document.querySelector('.swiper-container').swiper;
mySwiper.slideToLoop(mySwiper.realIndex, 0, false);
}}
};
useEffect(() => {
const mySwiper = document.querySelector('.swiper-container').swiper;
if (mySwiper) {
mySwiper.$el[0].classList.add(cx('swiper-container-custom'));
mySwiper.$el[0].children[1].classList.add(cx(['swiper-pagination-custom']));
mySwiper.$el[0].children[2].classList.add(cx('swiper-button-next-custom'));
mySwiper.$el[0].children[3].classList.add(cx('swiper-button-prev-custom'));
mySwiper.update();
}
});
return (
<ReactIdswiper {...params}>
{children}
</ReactIdswiper>
);
});
I don't have so much time to investigate more, but let me know if it helps you (try to implement the part with the pagination class maybe...), or if you didn't manage to do it. If you still need help, I'll take more time to elaborate a fresh and clean sandbox.
Best, Camille
I have this issue wirh safari. What did you do for safari browser?
Hello,
I have developed a swiper for a PWA, that has to work also in users' browsers.
It works perfectly on Chrome, but not with Safari.
I have tried with the following devices :
react-id-swiper version : 2.3.2
Here is what's happening :
Does anyone know what is going on ?
Thanks a lot !