N
N
Norum2021-08-18 01:52:16
css
Norum, 2021-08-18 01:52:16

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

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?

611c3f145f4d0833821174.jpeg
611c3f205425b561472246.jpeg

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;
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question