How to keep owl carousel fit in the window? - carousel

Question

Sorry i don't know how to place code properly into snippet. This is my owl carousel and its width gets larger to the right direction outside the window. I am a newbie, i googled but could not find the correct thread. I need help to fit my owl carousel inside the window.
Here is what it looks like shown below.
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img:hover{
padding: 0.5em 0em 0em 0em;
background: url("phone.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.sb-itm-img:hover {
padding: 2.3em 2em 4em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="restaurant.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="musician.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="travel.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="fashion.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="health.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="phptographer.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="modeling.png" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>

Answer 1

Try below implemented slider
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
overflow: hidden;
}
.sb-car-img:hover img{
transform: scale(1.2);
}
.sb-itm-img {
transition: all 0.6s ease-in 0s;
-webkit-transition: all 0.6s ease-in 0s;
-ms-transition: all 0.6s ease-in 0s;
}
.my-slider{
float: left:
width:100%;
padding: 0 15px;
overflow: hidden;
}
<div class="my-slider">
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>