Is there are any way of making carousel attachment fixed - html

Question

Is there are any way of making carousel attachment fixed just like we can use to make background-image attachment fixed? Example
https://jsfiddle.net/5c3b56a7/3/
if there are any way of fixing slider background attachment that would be really helpfull for me thanks.
<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>
My 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;
}