Комментарии пользователя Djuser

Сделать карусель фото с помощью JavaScript?

Djuser @Djuser

Проблем нету же смотри

<!--  Slider  -->
        <div class="swiper image-slider">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <div
                        class="slider-image"
                        style="
                            background-image: url(./static/images/sliders/2-26.png);
                        "
                    >
                        <div
                            class="d-flex justify-content-center align-items-center"
                            style="height: 100%"
                        >
                              Раздели как хочешь на flex  
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div
                        class="slider-image"
                        style="
                            background-image: url(./static/images/sliders/2022-03-28_10-04-01.png);
                        "
                    >
                        <div
                            class="d-flex justify-content-center align-items-center"
                            style="height: 100%"
                        >
                            Раздели как хочешь на flex  
                        </div>
                    </div>
                </div>

            </div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>

Импортируешь Bootstrap (по желанию) и импортируешь swiper (css, js) и делишь как хочешь.
Хочешь делишь на флексе на два потом один длина столько-то а у второго делишь на два и даешь flex-direction:column; и все.

CSS

/*************************** Slider ***************************/
.slider-image {
    height: 500px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.sliderwidth {
    width: 60%;
}


.swiper-slide {
    text-align: center;
     /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

 

@media (max-width: 900px) {
    .slider-image {
        height: 500px;
    }
    .sliderwidth {
        width: 90%;
    }
    .fs-auto-p {
        font-size: 14px ;
    }
    
}
@media (max-width: 640px) {
    .slider-image {
        height: 500px;
    }
    .sliderwidth {
        width: 90%;
    }
    .w-95 {
        width: 95%;
    }
    .fs-auto {
        font-size: 20px;
    }
    .fs-auto-p {
        font-size: 13px ;
    }
}

@media (max-width: 480px) {
    .slider-image {
        height: 500;
    }
    .sliderwidth {
        width: 90%;
    }
    

}

.swiper-pagination > .swiper-pagination-bullet {
    opacity: 1;
    background-color: #c2d6ca;
}
.swiper-pagination > .swiper-pagination-bullet-active {
    background-color: #3A3837;
}

.swiper-button-next, .swiper-button-prev {
    color: white;
    background: #3A3837;
    height: 70px;
    width: 70px;
    border-radius: 5px;
    transition: all 250ms ease-in-out;
}


.swiper-button-next:hover, .swiper-button-prev:hover  {
    background-color: #F1B464;
    color: black;
}

Войдите на сайт