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
    Commented 12 июл. 2017 в 15:44
  • Спасибо, решил проблему костылем Commented 15 июл. 2017 в 11:30

1 ответ 1

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

Ваш ответ

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

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