title: troubling with slick slider
body: <p>i'm having a little problem here. <br>
  i'm trying to customize the styling of the slider pagination dots and when i follow the instruction i found on web, i had to created a list named slick-dots. But when i created a ul element, there is a clone li was created too. For example, i had 4 pictures for the slide, so it had to have 4 li for the slide, but when i created the ul element, there is 5 li was created. how i can delete the last one. here is my HTML code: <br></p>
  <pre><code>    &lt;section class=&quot;slide-show&quot;&gt;
          &lt;div&gt;&lt;img src=&quot;./style/img/slide1.jpeg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src=&quot;./style/img/slide2.jpeg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src=&quot;./style/img/slide3.jpeg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src=&quot;./style/img/slide4.jpeg&quot; alt=&quot;&quot;&gt;&lt;/div&gt; 
          &lt;ul class=&quot;slick-dots&quot;&gt;
              &lt;li role=&quot;presentation&quot;&gt;&lt;/li&gt;
              &lt;li role=&quot;presentation&quot;&gt;&lt;/li&gt;
              &lt;li role=&quot;presentation&quot;&gt;&lt;/li&gt;
              &lt;li role=&quot;presentation&quot;&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  </code></pre>
  <p>and the css</p>
  <pre><code>.slick-dots{
      position: absolute;
      top: 50%;
      display: block;
      height: 0;
      float: right;
      right: -97%;
  }
  .slick-dots li{
      display: block !important;
  }
  </code></pre>
  <p>many thanks!</p>