Добрый день!
Есть 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
и прочие радости, которые по заверению интернета и является корнем всех зол, однако хотелось бы это зло как-то победить.