title: How to hide overflow on a carousel slider and set a loop
body: <p><a href="https://jsfiddle.net/eaotmar3/11/" rel="nofollow noreferrer">Here is the fiddle link </a></p>
  
  <p>Hi ! 
  I have a carousel slider and I want to hide the overflow outside the grey box (see the fiddle) and I would like the first button (the first div inside) to come back when the last one is gone. </p>
  
  <p>I am really note familiar with carousel and if someone have a basic lesson on that topic I would apreciate it. I am familiar with css but it feels like the carousel isn't working the same way. I hope this is not duplicated I didn't find a lot about carousel on stack. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('.slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#background_etape2  {
   background-color: #a6a6a6;
   width: 100%;
   height: 800px;
  
  }
  
  #sondage  {
   Float: left;
   left: 35px;
   font-size: 20px;
   font-weight: bold;
   white-space: nowrap;
   position: relative;
   top: 100px;
   color: black;
  }
  
  #liste_categorie_sondage  {
   margin-left: auto;
   margin-right: auto; 
   height: 200px;
      width: 600px;
   background-color: #555;
   border: 1px solid black; 
   position: relative;
   top: 390px;
  }
  /*
  #nav_sondage {
      list-style-type: none;
      margin: auto;
      padding: 0;
   list-style-position:inside;
  }
  */
  #categorie_sondage {
      display: block;
   width: 600px;
      color:  #99b3ff;
      padding: 8px 16px;
      list-style-position:inside;
   display: table-cell;
   font-size: 20px;
   position: relative;
   top: -300px;
   left: 250px;
   
   
  }
  
  #menusondage  {
   text-decoration: none;
   color: black;
   width: 600px;
   background-color: #808080;
   text-align: right;
   padding: 8px;
   display:table-cell;
   border: 2px solid black;
  }
  
  #menusondage:hover {
      background-color: #555;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="background_etape2" name="etape2"&gt;
  
   &lt;div id="etape2"&gt; 
     &lt;div id="liste_categorie_sondage" class="slider"&gt;
   
     &lt;div id="categorie_sondage"&gt; Économie &lt;a id="menusondage" href="economie.php"&gt;Listes des sondages&lt;/a&gt;&lt;/div&gt;
     &lt;div id="categorie_sondage"&gt; Environnement &lt;a id="menusondage" href="environnement.php"&gt;Listes des sondages&lt;/a&gt;&lt;/div&gt;
     &lt;div id="categorie_sondage"&gt; Santé &lt;a id="menusondage" href="sante.php"&gt;Listes des sondages&lt;/a&gt;&lt;/div&gt;
     &lt;div id="categorie_sondage"&gt; Éducation &lt;a id="menusondage" href="education.php"&gt;Listes des sondages&lt;/a&gt;&lt;/div&gt;
     &lt;div id="categorie_sondage"&gt; Services Sociaux &lt;a id="menusondage" href="sociaux.php"&gt;Listes des sondages&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT : My basic problem was coming from my link to code in the css plug-in.
  Like one of the anwser told me, I need absolutely the slick.css file in order to make it work and I can or not add the -theme file. Those css sheet hide the overflow without hidding the arrow.</p>
  
  <p>See those file here : </p>
  
  <p>There is the first one (slick.css)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Slider */
  .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;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the last one slick-theme.css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset 'UTF-8';
  /* Slider */
  .slick-loading .slick-list
  {
      background: #fff url('./ajax-loader.gif') center center no-repeat;
  }
  
  /* Icons */
  @font-face
  {
      font-family: 'slick';
      font-weight: normal;
      font-style: normal;
  
      src: url('./fonts/slick.eot');
      src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
  }
  /* Arrows */
  .slick-prev,
  .slick-next
  {
      font-size: 0;
      line-height: 0;
  
      position: absolute;
      top: 50%;
  
      display: block;
  
      width: 20px;
      height: 20px;
      padding: 0;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
  
      cursor: pointer;
  
      color: transparent;
      border: none;
      outline: none;
      background: transparent;
  }
  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus
  {
      color: transparent;
      outline: none;
      background: transparent;
  }
  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before
  {
      opacity: 1;
  }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before
  {
      opacity: .25;
  }
  
  .slick-prev:before,
  .slick-next:before
  {
      font-family: 'slick';
      font-size: 20px;
      line-height: 1;
  
      opacity: .75;
      color: white;
  
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev
  {
      left: -25px;
  }
  [dir='rtl'] .slick-prev
  {
      right: -25px;
      left: auto;
  }
  .slick-prev:before
  {
      content: '←';
  }
  [dir='rtl'] .slick-prev:before
  {
      content: '→';
  }
  
  .slick-next
  {
      right: -25px;
  }
  [dir='rtl'] .slick-next
  {
      right: auto;
      left: -25px;
  }
  .slick-next:before
  {
      content: '→';
  }
  [dir='rtl'] .slick-next:before
  {
      content: '←';
  }
  
  /* Dots */
  .slick-dotted.slick-slider
  {
      margin-bottom: 30px;
  }
  
  .slick-dots
  {
      position: absolute;
      bottom: -25px;
  
      display: block;
  
      width: 100%;
      padding: 0;
      margin: 0;
  
      list-style: none;
  
      text-align: center;
  }
  .slick-dots li
  {
      position: relative;
  
      display: inline-block;
  
      width: 20px;
      height: 20px;
      margin: 0 5px;
      padding: 0;
  
      cursor: pointer;
  }
  .slick-dots li button
  {
      font-size: 0;
      line-height: 0;
  
      display: block;
  
      width: 20px;
      height: 20px;
      padding: 5px;
  
      cursor: pointer;
  
      color: transparent;
      border: 0;
      outline: none;
      background: transparent;
  }
  .slick-dots li button:hover,
  .slick-dots li button:focus
  {
      outline: none;
  }
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before
  {
      opacity: 1;
  }
  .slick-dots li button:before
  {
      font-family: 'slick';
      font-size: 6px;
      line-height: 20px;
  
      position: absolute;
      top: 0;
      left: 0;
  
      width: 20px;
      height: 20px;
  
      content: '•';
      text-align: center;
  
      opacity: .25;
      color: black;
  
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .slick-dots li.slick-active button:before
  {
      opacity: .75;
      color: black;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>After this, I still have one probleme : The slider buttons just dont show up. 
  I tried to hide my CSS code with /* */ and yes, the slider button appear but in a weird way.
  <a href="https://i.stack.imgur.com/HMsxk.png" rel="nofollow noreferrer">This is the picture of what happen</a></p>