Newer
Older
pre-www / src / assets / css / blocks / carousel.css
.block-carousel{
    @apply w-full;
    .swiper{
        .swiper-button-prev, .swiper-button-next{
            @apply w-1/2 h-[var(--carousel-img-height)] top-0 mt-0;
            &::after{
                content: none;
            }
        }
        .swiper-button-prev{
            @apply left-0;
        }
        .swiper-button-next{
            @apply right-0;
        }
        .swiper-slide{
            @apply bg-white h-auto;
            &__img{
                @apply aspect-[3/2] h-auto;
                img{
                    @apply w-full h-full object-cover;
                }
            }
            &__caption{
                p{
                    @apply text-size-sm mt-base bg-white mb-0 h-full;
                }
            }
        }
        .swiper-pagination{
            @apply flex gap-x-2.5 absolute top-[calc(var(--carousel-img-height)+0.625rem)];
            .swiper-pagination-bullet{
                @apply w-full rounded-none h-px m-0 bg-grey-300 opacity-100;
                &-active{
                    @apply bg-black h-[3px];
                }
            }
        }
    }
}