Cacher is the code snippet organizer for pro developers

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<style>
.slick-slide img{
	max-width: 100%;
}
.slick-dots {
    display: flex;
    justify-content: center;
    margin: 0;
    list-style-type: none;
}
.slick-dots li {
    margin: 0 3px;
}
.slick-dots button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    text-indent: -9999px;
}
.slick-dots li.slick-active button {
    background-color: #bd3838;
}
</style>

<div class="slider">
    <div class="slides">
        <div class="slide">
            <div class="slide-container">
                <img src="//storage.googleapis.com/instapage-app-assets/1553700315_group_89.png" class="first-image" alt="">
            </div>
        </div>
        <div class="slide">
            <div class="slide-container">
                <img src="//storage.googleapis.com/instapage-app-assets/1553700315_group_90.png" class="second-image" alt="">
            </div>
        </div>
        <div class="slide">
            <div class="slide-container">
                <img src="//storage.googleapis.com/instapage-app-assets/1553700316_img-03.png" class="third-image" alt="">
            </div>
        </div>
    </div>
</div>

<script>
   $(document).ready(function ($) {
        $(".slides").slick({
            slidesToShow: 1,
            infinite: true,
            speed: 500,
            arrows: false,
            dots: true,
            autoplay: true,
            fade: true,
            responsive: [
                {
                    breakpoint: 750,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        dots: true,
                        arrows: false
                    }
                }
            ]
        });
    });
</script>