0

Добрый день! Есть Swiper карусель, для каждого слайда задан background-image, хочется чтобы добавить еще и background-position: fixed.

Однако после добавления этого свойства фоновое изображение исчезает.

    <div class="swiper-container" id="swiper-1">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url(/img/bgc.jpg);" src="img/bgc.jpg">
                <h2 class="subtitle">SUBTITLE1</h2>
                <div class="shape"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quae.</p>
                <a href="" class="rm -white">
                    <span class="-text">Смотреть все</span>
                    <span class="-overlay"></span>
                </a>
            </div>
            <div class="swiper-slide">
                <h2 class="subtitle">SUBTITLE2</h2>
                <div class="shape"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolorem, quo.</p>
                <a href="" class="rm -white">
                    <span class="-text">Смотреть все</span>
                    <span class="-overlay"></span>
                </a>
            </div>
            <div class="swiper-slide">
                <h2 class="subtitle">SUBTITLE3</h2>
                <div class="shape"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos.</p>
                <a href="" class="rm -white">
                    <span class="-text">Смотреть все</span>
                    <span class="-overlay"></span>
                </a>
            </div>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-pagination"></div>
    </div>

SCSS

.swiper-container#swiper-1{
    height: 100vh;
    .swiper-button-white{
        visibility: hidden;
    }
    &:hover{
        .swiper-button-white{
            visibility: visible;
        }
    }
    .swiper-slide{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .swiper-pagination{
        justify-content: center;
    }
}

Где то в недрах swiper'a прописаны translate3d и прочие радости, которые по заверению интернета и является корнем всех зол, однако хотелось бы это зло как-то победить.

2
  • 1
    Добавьте рабочий пример - сейчас в окне воспроизведения лишь пустое пространство
    – Cheg
    12 июл 2017 в 15:44
  • Спасибо, решил проблему костылем 15 июл 2017 в 11:30

1 ответ 1

1
$(document).scroll(function() {
    $('.swiper-slide-active').css('background-position', '0px ' + $(document).scrollTop() + 'px');
});

Ваш ответ

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

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