Slick Slider - Cutting off Image
<p>I'm using the slick slider jQ plugin for a project. I've got the functionality down with the syncing sliders but the navigation slider is set to show 5 slides yet it's showing 5 1/2 slides. Is there a better way to set this up?</p>

<p>Screenshot for reference:
<a href="https://i.stack.imgur.com/yInjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yInjs.png" alt="enter image description here"></a></p>

<p>Source:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Plugins
$(function() {
"use strict";

  // testimonial slider
  $('.js-items-slider-container .slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.js-items-slider-container .slider-nav',
    
  });
  // testimonial slider nav
  $('.js-items-slider-container .slider-nav').slick({
    slidesToShow: 5,
    slidesToscroll: 1,
    asNavFor: '.js-items-slider-container .slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    arrows: true,
    onAfterChange: function (slide, index) {
        jQuery('.current-slide').removeClass('current-slide');
        jQuery(this.$slides.get(index)).addClass('current-slide');
      },
      onInit: function (slick) {
        jQuery(slick.$slides.get(0)).addClass('current-slide');
      }
  });

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="band testimonials-band"&gt;
  &lt;div class="container"&gt;
    &lt;div class="small-12 large-10 large-centered columns"&gt;
      &lt;div class="items-slider-container js-items-slider-container"&gt;
        &lt;div class="slider-for"&gt;
          &lt;div&gt;
            &lt;h4&gt;Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.&lt;/h4&gt;
            &lt;p&gt;- Domenick DiSimone  &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h4&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.&lt;/h4&gt;
            &lt;p&gt;- John Doe &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h4&gt;Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.&lt;/h4&gt;
            &lt;p&gt;- Domenick DiSimone  &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h4&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.&lt;/h4&gt;
            &lt;p&gt;- John Doe &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h4&gt;Everything went well from my initial appointment to installation. I'm excited to see the difference on my monthly bills using solar and not paying so much to the power company.&lt;/h4&gt;
            &lt;p&gt;- Domenick DiSimone  &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h4&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi natus accusantium quisquam modi eaque laborum quo, harum eligendi iusto suscipit sunt, unde, placeat deleniti magnam! Veniam odio ipsam hic.&lt;/h4&gt;
            &lt;p&gt;- John Doe &lt;span class="loc"&gt;Nutley, New Jersey&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END Top Slider --&gt;

        &lt;div class="slider-nav show-for-large"&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130&amp;text=first" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="//placehold.it/130x130" alt=""&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END slider nav --&gt;
      &lt;/div&gt;
      &lt;!-- END Slider --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>