I have already tried to create a slider/carousel using Swiper.js exactly like the one on this site: https://stinna-it.nl/alle-projecten. I have also managed to achieve the text effect, however, I am having trouble with the background image. I added an image tag to the HTML, but it is not updating when the slide changes. I created an array of images and tried to update them according to the slide index number, but I keep getting an error stating "Unable to get image of undefined".
var images = [
{
id: "0",
img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
},
{
id: "1",
img: "https://i.im.ge/2022/12/15/df3XIx.almond-key.jpg",
},
{
id: "2",
img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
},
{
id: "3",
img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
},
{
id: "4",
img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
},
];
const img = document.querySelector(".prjctbg");
// for (i = 0; i < images.length; i ) {
// console.log(images[i].img);
// img.src = images[i].img;
// }
var swiper = new Swiper(".swiper-container", {
pagination: {
el: ".swiper-pagination",
clickable: true,
},
spaceBetween: 1,
slidesPerView: 2.5,
centeredSlides: true,
roundLengths: true,
loop: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChangeTransitionStart: function () {
var imgElement = document.querySelector(".prjctbg");
// Get the current slide index
var slideIndex = this.realIndex;
imgElement.src = images[slideIndex].img;
},
},
});.projectSlider {
width: 100vw;
height: 100vh;
position: relative;
.prjctbg {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(8px);
-webkit-filter: blur(8px);
}
}
.swiper-container {
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
transform: scale(0.8);
text-align: center;
// transition: cubic-bezier(0.165, 0.84, 0.44, 1);
p {
overflow: hidden;
color: #fff;
span {
transform: translateY(100px);
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
display: block;
}
}
h1 {
color: #fff;
font-size: 3em;
line-height: 100%;
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
margin: 0px;
transform: scale(0.5);
}
&.swiper-slide-active {
p {
opacity: 1;
transition-delay: 0.5s;
span {
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
transform: translateY(0px);
display: block;
}
}
h1 {
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
transition-delay: 0.15s;
transform: scale(1);
}
transform: scale(1);
}
} <link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css"
/>
<div >
<img src="" alt="" />
<div >
<div >
<div >
<div >
<div >
<h1 >
Audiovisual <br />
Design
</h1>
<p >
<span> Video Installation</span>
</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1 >
Exhibition <br />
Design
</h1>
<p >
<span> Multimedia Exhibition</span>
</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1 >
Texts and <br />
Images
</h1>
<p >
<span> website Print Magazine </span>
</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1 >
Material and <br />
Light
</h1>
<p >
<span> Short Video</span>
</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1 >
Dimension <br />
Design
</h1>
<p >
<span> Rendered Image </span>
</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1 >
App <br />
Design
</h1>
<p >
<span> Sustainability App</span>
</p>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>CodePudding user response：
Use the find function to reference the image by it's .id property, rather than its index / key:
imgElement.src = images.find( el => el.id == slideIndex ).img;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
CodePudding user response：
I figured it out, but I want to know how to animate it and if anyone knows a better solution to this problem, please share it. this is the updated code:
on: {
slideChangeTransitionStart: function () {
var imgElement = document.querySelector(".prjctbg");
// Get the current slide index
var slideIndex = this.realIndex;
console.log(slideIndex);
for (i = 0; i < images.length; i ) {
if (slideIndex == images[i].id) {
img.src = images[slideIndex].img;
}
}
},
},
CodePudding user response：
I am unfamiliar with Swiper.js. But I went ahead and solved and streamlined your problem within React.js.
Here is how I would approach said problem (not knowing your situation and full use cases).
LiveDemo: https://codesandbox.io/s/interesting-frog-yzttmb?file=/src/styles.css
It may seem really complicated, but all I am simply doing is mapping through your images and rendering them with some CSS conditionals.
The reason I chose to map over the photos for the PageButtons section, so as we add new photos to the data - we don't have to do any shoulder work, and the photo and new carousel button will automatically be added.
Ultimately, I would kind of build my own carousel, I noticed you had a ton of extra images as well that were the same image. I went and added one more to display the point.
The only task you are now left with are figuring out your animations - which I would recommend away from too many animations for optimization reasons, but you will do as you want.
Cheers,