Как сделать слайдер?

Question

lololoshka2010 @lololoshka2010

Как сделать слайдер?

здравствуйте,почему все элементы в одном слайде?как реализовать слайд на скрине?

ссылка на то,как должно быть(не грузит сюда фотокарточку):https://imgur.com/a/Rlb1Nov

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Merriweather:wght@700;900&display=swap"
        rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="header__logo">
                <img src="images/logo.svg" class="logo" alt="">
                <div class="logo__text">BuhOne</div>
            </div>
            <nav class="header__nav">
                <div class="header__contacts">
                    <ul class="contacts-list">
                        <li class="header__contacts-item">
                            <a href="tel:81112223344" class="header__contacts-a"><img src="images/phone.svg"
                                    class="header__contacts-img"> <a href="tel:81112223344"
                                    class="header__contacts-link">8 (111) 222-33-44</a> </a>
                        </li>
                        <li class="header__contacts-item">
                            <a href="#" class="header__contacts-a"><img src="images/clock.svg"
                                    class="header__contacts-img"><a href="#" class="header__contacts-link">Пн-Пт
                                    10:00-18:00</a></a>
                        </li>
                        <li class="header__contacts-item">
                            <a href="mailto:order@buhone.ru" class="header__contacts-a"><img src="images/mail.svg"
                                    class="header__contacts-img"><a href="mailto:order@buhone.ru"
                                    class="header__contacts-link">order@buhone.ru</a></a>
                        </li>
                        <li class="header__contacts-item">
                            <a href="#" class="header__contacts-a"><img src="images/geolocation.svg"
                                    class="header__contacts-img"><a href="#" class="header__contacts-link">Невский пр.
                                    130</a></a>
                        </li>
                    </ul>
                </div>
                <div class="menu">
                    <ul class="menu-list">
                        <li class="menu-item"><a href="#" class="menu-link">Главная</a></li>
                        <li class="menu-item"><a href="#" class="menu-link">услуги</a></li>
                        <li class="menu-item"><a href="#" class="menu-link">кейсы</a></li>
                        <li class="menu-item"><a href="#" class="menu-link">о компании</a></li>
                        <li class="menu-item"><a href="#" class="menu-link">контакты</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <main>
            <section class="services">
                <div class="container">
                    <div class="services__slider">
                        <div class="services__slider-item">
                            <div class="services__slider-content">
                                <h1 class="services__title">Бухгалтерские услуги в Санкт-Петербурге</h1>
                                <button class="services__btn">Наша презентация</button>
                            </div>
                        </div>
                        <div class="services__slider-item">
                            <div class="services__slider-content">
                                <h1 class="services__title">Бухгалтерские услуги в Санкт-Петербурге</h1>
                                <button class="services__btn">Наша презентация</button>
                            </div>
                        </div>
                        <div class="services__slider-item">
                            <div class="services__slider-content">
                                <h1 class="services__title">Бухгалтерские услуги в Санкт-Петербурге</h1>
                                <button class="services__btn">Наша презентация</button>
                            </div>
                        </div>
                        <div class="services__slider-item">
                            <div class="services__slider-content">
                                <h1 class="services__title">Бухгалтерские услуги в Санкт-Петербурге</h1>
                                <button class="services__btn">Наша презентация</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/slick.min.js"></script>
        <script src="js/jquery.fancybox.min.js"></script>
        <script src="js/main.js"></script>

</body>

</html>

$(function(){  
    $('.services__slider').slick({
        nextArrow: '<button type="button" class="slick_btn slick-next"></button>',
        prevArrow: '<button type="button" class="slick_btn slick-prew"></button>',
        infinite:false
    });
});