طراحی کاروسل عمودی با المنتور

تو این آموزش یاد میگیریم که یه کاروسل عمودی خفن با المنتور بسازیم
برای ساخت کاروسل، ویجت های مختلفی در المنتور وجود داره اما اکثر کاروسل ها به صورت افقی هست . پس ما تو این آموزش سعی کردیم متفاوت عمل کنیم و یه کاروسل عمودی جذاب با المنتور بسازیم که میتونه جذابیت طرح رو چند برابر بیشتر کنه 🙂 شما میتونید تصاویر این کاروسل رو به راحتی تغییر بدین یا حتی به هر تصویر یک لینک خاص اعمال کنید. کدهای css این پست هم در پایین ویدئو قرار گرفته

کدهای کاروسل 1 (حرکت به بالا):

selector img{
    border-radius: 10px!important;
    box-shadow: 0px 0px 10px 0px rgba(214, 238, 66, 0.17);
    animation: looping 15s infinite linear;
}

selector{
    width: 200px;
    height: 700px;
    max-height: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

@keyframes looping {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

کدهای کاروسل 2 (حرکت به پایین):

selector img{
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(214, 238, 66, 0.17);
    animation: looping 15s linear 0s infinite none reverse;
     animation-direction: reverse;
}

selector{
    max-height: 700px;
    height: 700px;
    width: 200px;

    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

@keyframes looping{
0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-100%);
}
}