Amos Machora• 330
@AmohPrince
Posted
Hey @Elicanto. Your cart has some form of cool transition sliding effect when it comes to view. how did you do that?
0
Design comparison
Solution retrospective
Hi ! I'm glad I completed this project (even if I think I did a loooot of mistakes and useless things) but I have absolutely no idea of how to reduce a string in medium and small screens... (so I cheated a little haha).
And my slider is a little bit broken in the modal, but right now I can't think of a solution...
Any feedback is welcomed, I'm a real newbie to javascript so I would love to have some advices !
Community feedback
sudarshan hosalli• 510
@sudarshan161219
Posted
hey cheers for completing the challange 🎉
layout looks good just little bit of padding and margin adjustment 👌
for image carousel / image slider here is my solution👇
HTML
<aside class="slider"> <div class="slider-container"> <div class="slide"> <img class="product-img product-img-1" src="images/image-product-1.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-2" src="images/image-product-2.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-3" src="images/image-product-3.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-4" src="images/image-product-4.jpg" alt="product-img"> </div> </div> <div class="next-prev-desktop"> <div> <img class="previous-desktop" src="images/icon-previous.svg" alt="previous"> </div> <div> <img class="next-desktop" src="images/icon-next.svg" alt="next"> </div> </div> </aside>CSS
.slider { position: absolute; right: 0; left: 0;
}
.slider-container { width: 100%; margin: 0 auto; /* height: 40vh; */ min-height: 280px; max-width: 80rem; position: relative; overflow: hidden; }
.slide { position: absolute; width: 100%; height: 100%; display: grid; place-items: center; transition: all 0.25s ease-in-out; text-align: center; }
JavaScript const productThumbnail = document.querySelectorAll('.product-thumbnail');
const slides = document.querySelectorAll('.slide');
const nextBtn = document.querySelectorAll('.next');
const prevBtn = document.querySelectorAll('.previous');
slides.forEach(function (slide, index) {
slide.style.left = ${index * 100}%;
});
let counter = 0;
nextBtn.forEach(function (next) { next.addEventListener("click", function () { counter++; carousel(); }); });
prevBtn.forEach(function (previous) { previous.addEventListener("click", function () { counter--; carousel(); }); });
function carousel() { if (counter === slides.length) { counter = 0; } if (counter < 0) { counter = slides.length - 1; }
slides.forEach(function (slide) {
slide.style.transform = translateX(-${counter * 100}%)
});
}
happy coding
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord