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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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