При смене активного слайда на следующий он съезжает вправо, а мне нужно чтобы новый активный слайд оставался на том же месте, где был изначально. Как это исправить?
Весь код
https://jsfiddle.net/3hrakdnm/
Сам сайт
cb95142.tmweb.ru
<section class="gallery">
<div class="gall-wrap">
<div class="wrapper">
<div class="content">
<div class="gallery-block">
<div class="plug"></div>
<div class="title-block">
<div class="forehead">Frispes gallery</div>
<h3>Immersive beautiful<br>co-working space gallery</h3>
</div>
</div>
</div>
<div class="gallery-slider owl-carousel">
<div class="gal-slide">
<img src="img/gal-1.jpg" alt="1">
</div>
<div class="gal-slide">
<img src="img/gal-2.jpg" alt="2">
</div>
<div class="gal-slide">
<img src="img/gal-3.jpg" alt="3">
</div>
<div class="gal-slide">
<img src="img/gal-4.jpg" alt="4">
</div>
<div class="gal-slide">
<img src="img/gal-5.jpg" alt="5">
</div>
<div class="gal-slide">
<img src="img/gal-6.jpg" alt="6">
</div>
</div>
</div>
</section>
gallery {
max-height: 600px;
}
.gallery .gall-wrap {
overflow: hidden;
}
.gallery-block {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.gallery-slider {
min-width: 100% !important;
min-height: 600px !important;
transform: translateY(-215px);
}
.gallery-slider .gal-slide {
transition: 1.3s !important;
width: 350px !important;
height: 350px !important;
}
.gallery-slider .owl-stage {
display: flex;
align-items: flex-end;
justify-content: center;
margin-left: 100px;
}
.gallery-slider .owl-stage-outer {
overflow: visible !important;
height: 600px !important;
}
.gallery-slider .owl-item {
width: 350px !important;
height: 350px;
transition: 1.3s !important;
}
.gallery-slider .owl-item img {
width: 350px;
height: 350px;
transition: 1.3s !important;
}
.gallery-slider .owl-item.center {
height: 600px !important;
width: 445px !important;
transition: 1.3s !important;
}
.gallery-slider .owl-item.center img {
width: 445px;
height: 600px !important;
}
.gallery-slider .owl-item.center .gal-slide {
height: 600px !important;
width: 445px !important;
}
.gallery-slider .owl-nav {
font-size: 40px;
position: absolute;
top: 150px;
right: 340px;
}
.gallery-slider .owl-next,
.gallery-slider .owl-prev {
width: 65px;
text-align: left;
}
.gallery-slider .owl-next i,
.gallery-slider .owl-prev i {
color: #9a9a9a;
transition: 0.3s;
}
.gallery-slider .owl-prev {
right: 40px;
left: auto;
text-align: right;
}
.gallery-slider .owl-prev:after {
content: '';
display: inline-block;
border-bottom: 6px solid #9a9a9a;
width: 0;
vertical-align: middle;
margin-top: -10px;
margin-left: -1px;
transition: 0.3s all;
}
.gallery-slider .owl-prev:hover:after {
width: 30px;
border-bottom-color: #ff5722;
}
.gallery-slider .owl-prev:hover i {
color: #ff5722;
}
.gallery-slider .owl-next:before {
content: '';
display: inline-block !important;
position: relative;
top: -5px;
right: -1px;
border-bottom: 6px solid #9a9a9a;
width: 0;
vertical-align: middle;
transition: 0.3s all;
margin: 0;
}
.gallery-slider .owl-next:hover i {
color: #ff5722;
}
.gallery-slider .owl-next:hover:before {
width: 30px;
border-bottom-color: #ff5722;
}
