It is necessary to impose such a slider. The problem arises when you make the left and right buttons, you just don’t have a clue what to do with them. And there is an overflow problem. How to position the navigation so that the position of checkboxes depends on the content filling inside the slider. How to deal with all this? You need to impose without flakes and clearly for a given HTML. That's what happened with me 
body { font-family: 'PT Sans Narrow', sans-serif; } .clearfix::after { content: ''; display: table; clear: both; } .reviews { position: relative; width: 768px; margin: 0 auto; padding-top: 37px; padding-bottom: 70px; background-color: #f8f5f2; } .reviews__wrapper { position: relative; width: 640px; min-height: 255px; margin: 0 auto; padding-bottom: 50px; } .reviews__title { margin: 0; margin-top: 10px; margin-bottom: 48px; font-size: 40px; font-weight: bold; line-height: 30px; text-transform: uppercase; } .btn { box-sizing: border-box; position: absolute; display: block; top: 0; right: 0; width: 160px; padding-top: 14px; padding-bottom: 15px; font-size: 18px; font-weight: bold; line-height: 24px; color: #000; border: 1px solid #e5ddd5; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; } .slider__input { display: none; } .reviews__item { position: relative; display: block; box-sizing: border-box; float: left; width: 540px; min-height: 160px; margin: 0 50px; padding-top: 33.5px; padding-left: 140px; padding-bottom: 34.5px; border: 1px solid #e5ddd5; } .reviews__author-foto { position: absolute; top: 38px; left: 30px; } .reviews__author-foto img { width: 80px; height: 80px; border-radius: 50%; } .reviews__author-name { font-size: 24px; font-weight: bold; font-style: normal; line-height: 27px; } .reviews__list p { margin: 0; margin-top: 13px; font-size: 18px; line-height: 27px; } .slider { overflow: hidden; } .reviews__list { width: 300%; } .reviews__list button { display: none; } .slider__toggles { position: absolute; box-sizing: border-box; left: 257px; bottom: 47px; width: 150px; padding-left: 25px; text-align: center; background-color: #f8f5f2; } .slider__toggles label { display: inline-block; width: 6px; height: 6px; margin-right: 23px; font-size: 0; transform: rotate(45deg); border: 1px solid #929292; cursor: pointer; } #reviews-input-1:checked~.slider__toggles label[for="reviews-input-1"], #reviews-input-2:checked~.slider__toggles label[for="reviews-input-2"], #reviews-input-3:checked~.slider__toggles label[for="reviews-input-3"] { background-color: #353535; } #reviews-input-1:checked~.reviews__list { transform: translate(0); } #reviews-input-2:checked~.reviews__list { transform: translate(-640px); } #reviews-input-3:checked~.reviews__list { transform: translate(-1280px); } <section class="reviews"> <div class="reviews__wrapper slider"> <h2 class="reviews__title">Отзывы о нас</h2> <a href="" class="reviews__write btn">Оставить свой</a> <input type="radio" class="slider__input" name="reviews" id="reviews-input-1" checked> <input type="radio" class="slider__input" name="reviews" id="reviews-input-2"> <input type="radio" class="slider__input" name="reviews" id="reviews-input-3"> <div class="reviews__list clearfix"> <blockquote class="reviews__item slider__item"> <div class="reviews__author-foto"> <img src="img/travis.jpg" width="50" height="48" alt="Фото Трэвисиа Баркера"> </div> <cite class="reviews__author-name">Трэвис Баркер</cite> <p>Спасибо за лысину! Был проездом в Москве, заскочил побриться, чтобы было видно новую татуировку!</p> </blockquote> <blockquote class="reviews__item slider__item"> <div class="reviews__author-foto"> <img src="img/travis.jpg" width="50" height="48" alt="Фото Трэвисиа Баркера"> </div> <cite class="reviews__author-name">Джон Смит</cite> <p>Отличную стрижку мне сделали ребята.</p> </blockquote> <blockquote class="reviews__item slider__item"> <div class="reviews__author-foto"> <img src="img/travis.jpg" width="50" height="48" alt="Фото Трэвисиа Баркера"> </div> <cite class="reviews__author-name">Иван Бородайло</cite> <p>В Бородинском ваша борода в надёжных руках</p> </blockquote> <button class="reviews__prev" type="button">Предыдущий отзыв</button> <button class="reviews__next" type="button">Следующий отзыв</button> </div> <div class="reviews__toggles slider__toggles"> <label for="reviews-input-1" class="slider__toggle" checked>1</label> <label for="reviews-input-2" class="slider__toggle">2</label> <label for="reviews-input-3" class="slider__toggle">3</label> </div> </div> </section> 