Hello, MetisT! π
Great job on this challenge! I have a few suggestions to improve your solution:
- I am not a big fan of these box-shadows. This is my feeling but i think in this specific project simpler is better.
- You can easily rework your slider to be infinite. I mean, it won't stop after your reach last slide, but it will back to beginning of your slides. Try this code:
$('.arrow-left').click(()=>{
if(i>0){
i--
imageSlide(i)
checkSlideState(i)
} else if (i <= 0) {
i = 2;
imageSlide(i);
checkSlideState(i);
}
})
$('.arrow-right').click(()=>{
if(i<2){
i++
imageSlide(i)
checkSlideState(i)
} else if (i <= 2) {
console.log('hello');
i = 0;
imageSlide(i)
checkSlideState(i)
}
})
- Your padding on
.upper-section .right
is too big on mobile version, instead of 80px try for example with 20px so your content isn't missplaced. - The same problem occurs with
.lower-section .middle-text
. You can removemargin: 40px;
from this element on mobile resolution.
Good luck with that, have fun coding! πͺ