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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js