How to make sure that the active slide does not move when changing?

Question

css

When you change the active slide to the next one, it slides to the right, and I need the new active slide to remain in the same place where it was originally. How to fix it?




All code https://jsfiddle.net/3hrakdnm/
The site itself 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;
}