Как сделать слайдер как на примере (4 позиции)

<div class="slider">
        <div class="slider_line">
            <div class="slide"><button class="button_animals1"> <span class="text_batton_animal">Собаки</span></button>
            <button class="button_animals2"><img src="icon_jpg/dog1.png" alt="Dog" class="img_dog"></button></div>
            <div class="slide"><button class="button_animals3"> <span class="text_batton_animal">Попугаи</span> </button>
            <button class="button_animals4"><img src="icon_jpg/popugai.png" alt="Popugai" class="img_popugai"></button></div>
            <div class="slide"><button class="button_animals5"> <span class="text_batton_animal">Коты</span></button>
            <button class="button_animals6"><img src="icon_jpg/cat1.png" alt="Cat" class="img_cat"></button></div>
            <div class="slide"><button class="button_animals7"> <span class="text_batton_animal">Обезьяны</span> </button>
            <button class="button_animals8"><img src="icon_jpg/monkey.png" alt="Monkey" class="img_monkey"></button></div>
 </div>
    </div>
       <!-- batton_list -->
       <div>
            <button class="button_list1"><img src="icon_jpg/list_left.png" alt="list_left" class="img_icon_left"></button>
            <button class="button_list2"><img src="icon_jpg/list_right.png" alt="list_right"class="img_icon_right"></button>

       </div>