0

Имеется слайдер, созданный с помощью компонента Bootstrap v4.5

<!-- Слайдер -->
    <div id="carouselExampleControls_2" class="carousel slide" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner">

            <div class="carousel-item active">
                <div class="carousel-caption container d-md-block">
                    <h5 class="lofts_slider_header">Заголовок 1</h5>
                </div>
                <img src="img/slider-photo.png" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-item">
                <div class="carousel-caption container d-md-block">
                    <h5 class="lofts_slider_header">Заголовок 2</h5>
                </div>
                <img src="img/slider-photo.png" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-item">
                <div class="carousel-caption container d-md-block">
                    <h5 class="lofts_slider_header">Заголовок 3</h5>
                </div>
                <img src="img/slider-photo.png" class="d-block w-100" alt="...">
            </div>

        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls_2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls_2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
<!-- Конец слайдера -->

Сейчас он выглядит так и это отлично работает для мобильной версии:

слайдер в мобильной версии

Но мне нужно, чтобы в десктопе показывались превью предыдущего и следующего слайда:

слайдер в десктопе

Подскажите, как это сделать? Может быть мне стоит сменить слайдер с бустрапа на аналогичный из другой библиотеки?

1 ответ 1

1

Можете прикрепить ссылку на песочницу ?

Используйте библиотеку slick-slider. В нем можно указать параметр variableWidth, который показывает полностью элемент слайдера если он достаточной ширины, а иначе часть контента занимает следующий элемент

1
  • Действительно, библиотека Slick-Slider оказалась полезной. Брейкпоинты позволяют сделать разное отображение на десктопе и мобильных экранах. Воспользовался настройками: centerMode: true, centerPadding: '8.281vw', 23 авг 2020 в 11:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.