是否有任何方法可以固定旋转木马附件

Question

是否有任何方法可以使旋转木马附件固定，就像我们可以用来固定背景图像附件一样？示例

https://jsfiddle.net/5c3b56a7/3/

如果有任何方法可以修复滑块背景附件，对我来说真的很有帮助。

   <div id="main-slider" class="owl-carousel owl-theme text-center">
    <div class="item text-center">
      <div class="position col-lg-12 text-center">
        <h1 class="swiper-slide text-center">
          <strong>
            welcome to the shop
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            Take your time looking around & don't be shy
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
            START BROWSING
          </button>
        </p>
      </div>
      <img src="img/front_girl1.jpg">
    </div>
    <div class="item text-center">
      <div class="position col-lg-12 text-center">
        <h1 class="swiper-slide">
          <strong>
            Huge summer sale
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            All sunglasses 50% off while supplies last
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default color-red btn-lg button hvr-float-shadow" id="focus">
            SHOP SUNGLASSES
          </button>
        </p>
      </div>
      <img src="img/front_girl_3.jpg" style="background-position:fixed">
    </div>
    <div class="item text-center">
      <div class="position col-lg-12 text-center">
        <h1 class="swiper-slide">
          <strong>
            Make a statement
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            Check the store for more information
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default color-green btn-lg button hvr-float-shadow" id="focus">
            SHOP COATS
          </button>
        </p>
      </div>
      <img src="img/front_girl_2.jpg" style="background-position:fixed">
    </div>
  </div>

我的CSS

  /*slider*/
  #main-slider .item img{
   display: block;
   width: 100%;
   height:700px;
   z-index: -1;
  }
 .position{
   position: absolute;
   padding-top: 240px;
  }
.swiper-slide{
 text-transform: uppercase;
 letter-spacing: 3px;
 font-size: 60px;
 line-height: 79px!important;
 color: #fff;
 }
 .subtitle{
 font-family: 'Rouge Script', cursive;
 font-size: 40px;
 line-height: 39px!important;
 font-weight: 400;
 color: #fff;
 font-style: italic;
}
strong{
 font-weight: bold;
}
.btn-default{
background-color: #5cbcf6;;
border-radius: 0px;
color: #fff;
height: 61px;
margin-bottom: 20px;
font-size: 15px;
width: 250px;
float: none;
text-align: center;
border: none;
letter-spacing: 3px;
text-transform: uppercase;
}
.btn-default:hover{
 background-color: #5cbcf6;;
 border-radius: 0px;
 color: #fff;
 height: 61px;
 margin-bottom: 20px;
 font-size: 15px;
 width: 250px;
 float: none;
 text-align: center;
 border: none;
 letter-spacing: 3px;
 text-transform: uppercase;
 `enter code here`}

.color-red{
  background-color:#ff4f57!important;
 }  
.color-green{
  background-color: #54df92!important;
}
.top-space{
  padding-top: 30px;
 }
.top-spacing{
  padding-top: 60px;
}
.space-from-top{
 margin-top: 30px;
}