Keep slider elements on the same row with position relative - html

Question

I have a slider with 3 slides for now. I want those 3 slides to be on the same rows or to be moved to the same row without position: absolute.
Live fiddle: https://jsfiddle.net/5z167ypt
HTML:
<div class="slider">
<div class="slide active-slide">
<h2>Slide 1</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
<div class="slide slide-right">
<h2>Slide 2</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
<div class="slide slide-right">
<h2>Slide 3</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
</div><!-- .slider -->
<div class="controlers">
<button id="next">Next</button>
<button id="previous">Previous</button>
</div><!-- .controlers -->
CSS:
.slider,
.controlers{
width: 80%;
margin: auto;
overflow: hidden;
}
.slide{
position: relative;
width: 100%;
float: left;
transform: translateX(0);
transition: 1s transform ease-in-out;
text-align: center;
}
.slide-left{
transform: translateX(-100vw);
}
.slide-right{
transform: translateX(100vw);
}
jQuery:
//On clicking #next button
$('#next').click(function(){
var current = $('.active-slide'),
next = $('.active-slide').next();
//Move current active slide to the left & remove active class
current.removeClass('active-slide').addClass('slide-left');
//Add active class to nect slide to be in the center & remove slide classes
next.addClass('active-slide').removeClass('slide-right slide-left');
});
//On clicking #previous button
$('#previous').click(function(){
var current = $('.active-slide'),
previous = $('.active-slide').prev();
//Move current active slide to the right & remove active class
current.removeClass('active-slide').addClass('slide-right');
//Add active class to previous slide to be in the center & remove slide classes
previous.addClass('active-slide').removeClass('slide-right slide-left');
});
For now, The 3 slides are divided into 3 rows. Each slide is moving right and left in a separate row. I want all the 3 slides to be moving in the same row.

Answer 1

You can use plugin for slider. Like Slick Slider
<script src="https://code.jquery.com/jquery-3.6.0.min.js"/>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"/>
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
});
<div class="slider">
<div class="slide active-slide">
<h2>Slide 1</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
<div class="slide slide-right">
<h2>Slide 2</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
<div class="slide slide-right">
<h2>Slide 3</h2>
<img src="https://place-hold.it/100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis maiores quia excepturi doloribus fugit nemo in inventore quidem at modi quasi rerum nulla ut, ab libero adipisci sint dolores.</p>
</div>
</div>