I am using swiper.js and and I’m trying to have a swiper with text slide, video slide and image slide, the slide are created in a js file because their is different swiper with not the same amount of slide, not problem when creating a swiper with only image but when I try to add text slide it won’t work, the text isn’t really considered a slide and so on the same slide their is the text and the next slide an image or an another text for example.I don’t understand why I can’t put the text on a slide by himself.
function forceLazyLoad(swiper) {
const slides = swiper.slides;
slides.forEach((slide) => {
const images = slide.querySelectorAll('.swiper-lazy');
images.forEach((img) => {
if (!img.src) {
img.src = img.getAttribute('data-src');
}
});
});
}
function createSlides(collection) {
const swiperWrapper = document.getElementById('swiper-wrapper');
swiperWrapper.innerHTML = '';
collection.forEach((item, index) => {
const slide = document.createElement('div');
slide.className = 'swiper-slide';
if (item.type === 'text' || item.type ==='textS') {
const textDiv = document.createElement('div');
textDiv.className = 'carousel-text swiper-lazy';
textDiv.style.display = 'block';
textDiv.innerHTML = item.content;
textDiv.style.textAlign = 'center';
slide.appendChild(textDiv);
} else if (item.type === 'video') {
const video = document.createElement('video');
video.setAttribute('data-src', item.src);
video.className = 'swiper-lazy';
video.controls = true;
video.setAttribute('data-text', item.text);
const preloader = document.createElement('div');
preloader.className = 'swiper-lazy-preloader';
slide.appendChild(video);
slide.appendChild(preloader);
} else if (item.type === 'double') {
const img1 = document.createElement('img');
img1.setAttribute('data-src', item.src1);
img1.className = 'img-fluid swiper-lazy';
img1.setAttribute('data-text', item.text);
const img2 = document.createElement('img');
img2.setAttribute('data-src', item.src2);
img2.className = 'img-fluid swiper-lazy';
img2.setAttribute('data-text', item.text2);
const preloader1 = document.createElement('div');
preloader1.className = 'swiper-lazy-preloader';
const preloader2 = document.createElement('div');
preloader2.className = 'swiper-lazy-preloader';
slide.appendChild(img1);
slide.appendChild(preloader1);
slide.appendChild(img2);
slide.appendChild(preloader2);
} else if (item.type === 'quatre') {
const img1 = document.createElement('img');
img1.setAttribute('data-src', item.src1);
img1.className = 'img-fluid2 swiper-lazy';
img1.setAttribute('data-text', item.text);
const img2 = document.createElement('img');
img2.setAttribute('data-src', item.src2);
img2.className = 'img-fluid2 swiper-lazy';
img2.setAttribute('data-text', item.text2);
const img3 = document.createElement('img');
img3.setAttribute('data-src', item.src3);
img3.className = 'img-fluid2 swiper-lazy';
img3.setAttribute('data-text', item.text3);
const img4 = document.createElement('img');
img4.setAttribute('data-src', item.src4);
img4.className = 'img-fluid2 swiper-lazy';
img4.setAttribute('data-text', item.text4);
const preloader1 = document.createElement('div');
preloader1.className = 'swiper-lazy-preloader';
const preloader2 = document.createElement('div');
preloader2.className = 'swiper-lazy-preloader';
const preloader3 = document.createElement('div');
preloader3.className = 'swiper-lazy-preloader';
const preloader4 = document.createElement('div');
preloader4.className = 'swiper-lazy-preloader';
slide.appendChild(img1);
slide.appendChild(preloader1);
slide.appendChild(img2);
slide.appendChild(preloader2);
slide.appendChild(img3);
slide.appendChild(preloader3);
slide.appendChild(img4);
slide.appendChild(preloader4);
} else if (item.type === 'slime') {
const slimeDiv = document.createElement('div');
slimeDiv.className = 'slime-slide';
slimeDiv.innerHTML = '<div class="slime"></div>';
slide.appendChild(slimeDiv);
} else {
const img = document.createElement('img');
img.setAttribute('data-src', item.src);
img.id = 'dynamicImage';
img.className = 'img-fluid swiper-lazy';
img.setAttribute('data-text', item.text);
img.onclick = () => toggleFullscreen(img);
const preloader = document.createElement('div');
preloader.className = 'swiper-lazy-preloader';
img.addEventListener('mouseover', () => {
const curseurTexte = document.getElementById('curseurTexte');
curseurTexte.textContent = item.text;
curseurTexte.style.display = 'block';
});
img.addEventListener('mousemove', (e) => {
const curseurTexte = document.getElementById('curseurTexte');
curseurTexte.style.left = (e.clientX + window.scrollX - 10) + 'px';
curseurTexte.style.top = (e.clientY + window.scrollY - 30) + 'px';
});
img.addEventListener('mouseout', () => {
const curseurTexte = document.getElementById('curseurTexte');
curseurTexte.style.display = 'none';
});
slide.appendChild(img);
slide.appendChild(preloader);
}
swiperWrapper.appendChild(slide);
});
swiper.update();
swiper.slideTo(0);
currentSlide = 0;
swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView : 'auto',
mousewheel: {
invert: true,
},
lazy: {
loadPrevNext: true,
loadOnTransitionStart: true,
},
on:{
slideChangeTransitionEnd: function () {
currentSlide = swiper.realIndex;
if( currentSlide === previousIndex ) {
swiper.slideTo(0);
}
previousIndex = currentSlide;
//updateCarousel();
},
slideChange: function () {
forceLazyLoad(swiper);
}
}
});
}`
In this code their is a case for every type of slide, it’s use whenever their is a new swiper
I also “store” my image and text like this
'KITTY': [
{ type:'text', content:"text example"},
{ src: '/Carousel/HELLO KITTY/affiche/モントルハローキティ.webp', text: 'モントルハローキティ' }
],
And the html
<div class="swiper-container">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
<div class="carousel-controls">
<div class="carousel-control-prev">‹</div>
<div class="carousel-control-next">›</div>
</div>
</div>
I tried to change the setting of my swiper, slide per view or things like that, the thought the problem came from the lazy loader because without the forceLazyLoad function the image won’t show up but even without the problem remains the same.
Thank you for the help.