Comecei a estudar HTML e CSS agora. Porém preciso fazer um slide e achei um cédigo pronto, mas precisava que ele tivesse aqueles botões redondos pequenos embaixo centralizado no meio. É para versão mobile. Alguem saberia como faço?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    <script type = "text/javascript" > // <![CDATA[
      $(document).ready(function() {
        $('.customer-logos').slick({
          slidesToShow: 4,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 1500,
          arrows: false,
          dots: false,
          pauseOnHover: false,
          responsive: [{
            breakpoint: 768,
            settings: {
              slidesToShow: 3
            }
          }, {
            breakpoint: 520,
            settings: {
              slidesToShow: 1
            }
          }]
        });
      });
    // ]]></script>

<!-- language: lang-css -->

    <style><!-- div#banner {}

    .banner img {
      margin-bottom: 20px;
    }


    /* Slider */

    .slick-slide {
      margin: 0px 5px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-slider {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
      touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
    }

    .slick-list {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    .slick-list:focus {
      outline: none;
    }

    .slick-list.dragging {
      cursor: pointer;
      cursor: hand;
    }

    .slick-slider .slick-track,
    .slick-slider .slick-list {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .slick-track {
      position: relative;
      top: 0;
      left: 0;
      display: block;
    }

    .slick-track:before,
    .slick-track:after {
      display: table;
      content: '';
    }

    .slick-track:after {
      clear: both;
    }

    .slick-loading .slick-track {
      visibility: hidden;
    }

    .slick-slide {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
    }

    [dir='rtl'] .slick-slide {
      float: right;
    }

    .slick-slide img {
      display: block;
    }

    .slick-slide.slick-loading img {
      display: none;
    }

    .slick-slide.dragging img {
      pointer-events: none;
    }

    .slick-initialized .slick-slide {
      display: block;
    }

    .slick-loading .slick-slide {
      visibility: hidden;
    }

    .slick-vertical .slick-slide {
      display: block;
      height: auto;
      border: 1px solid transparent;
    }

    .slick-arrow.slick-hidden {
      display: none;
    }

    --></style>

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js" type="text/javascript"></script>
    </p>
    <div class="banner"><img alt="" src="{{media url=" wysiwyg/teste/categorias/kitbody.png "}}" /></div>
    <div class="customer-logos">
      <div class="slide">
        <a href="/roupas-de-bebes/departamento/bermuda+calca+mij_o"><img alt="" src="{{media url=" wysiwyg/teste/categorias/Mijoes.png "}}" /></a>
      </div>
      <div class="slide">
        <a href="/higiene-bebe"><img alt="" src="{{media url=" wysiwyg/teste/categorias/Higiene.png "}}" /></a>
      </div>
      <div class="slide">
        <a href="/alimentacao-bebe"><img alt="" src="{{media url=" wysiwyg/teste/categorias/alimenta_o.png "}}" /></a>
      </div>
    </div>

<!-- end snippet -->