<div class="slider">
<div class="left-arrow">
Prev
</div>
<div class="slider-body">
<div class="single-example curry">
<h3>1</h3>
</div>
<div class="single-example curry">
<h3>2</h3>
</div>
<div class="single-example curry">
<h3>3</h3>
</div>
<div class="single-example">
<h3>4</h3>
</div>
<div class="single-example">
<h3>5</h3>
</div>
<div class="single-example">
<h3>6</h3>
</div>
</div>
<div class="right-arrow">
Next
</div>
</div>
.slider {
display: flex;
margin: 0 auto;
width: 400px;
}
.left-arrow, .right-arrow {
height: 61px;
width: 61px;
border: 1px solid white;
border-radius: 30px;
box-shadow: 0 0 10px 1px #00000040;
cursor: pointer;
position: relative;
}
.slider-body{
margin: 0 auto;
width: 400px;
display: flex;
justify-content: space-between;
}
.single-example {
width: 100px;
height: 100px;
background: #eee;
display: none;
border: 1px solid #fff;
}
.curry {
display: block;
}
/*кнопка next*/
$('.right-arrow').click(function(){
var firstImage = $('.slider-body').children('.curry').first();
var imgPos = firstImage.index();
var posLast = $('.single-example').eq(imgPos+3).index();
firstImage.removeClass('curry');
$('.slider-body').children('.single-example').eq(posLast).addClass('curry');
});
/*кнопка prev*/
$('.left-arrow').click(function(){
var lastImage = $('.slider-body').children('.curry').last();
var imgPos = lastImage.index();
var posLast = $('.single-example').eq(imgPos-3).index();
lastImage.removeClass('curry');
$('.slider-body').children('.single-example').eq(posLast).addClass('curry');
});
This Pen doesn't use any external CSS resources.