Menu icon Foundation
Using Slick Slider - Extra Space Off Screen

I am using the slick slider, which I think is great!! I'm using it as a full screen slider and I have what seems like 10-15 pixels extra to the right that when you touch the mouse or touchpad (using a mac) you can see that you can bring the whole slider and site over RTL about 10-15 pixels. I've removed certain classes individually to see what's causing it but still unable to pinpoint exactly where the problem is. Please help and thank you in advance for any advice!

Jim

I haven't really modified the CSS so I'm not including it because it's the CSS it comes with. I can add if you feel it necessary to properly debug however. I am using both the standard slick.css and slicktheme.css.

Another note is I'm using F5 which shouldn't matter but thought I'd mention it.

Here is the site I'm building. Forgive it's half put together look. http://furiousideasonline.com/ici-az/

<div class="single-item hide-for-small-only">
      <div class="slide"><img src="img/DSC_4204.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <a href="service.html"><button class="info">LEARN MORE</button></a>
          </div>
        </div>
      </div>
      <div class="slide"><img src="img/DSC_4212.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <button class="info"><a href="service.html">LEARN MORE</a></button>
          </div>
        </div>
      </div>
      <div class="slide"><img src="img/DSC_4230.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <button class="info"><a href="service.html">LEARN MORE</a></button>
          </div>
        </div>
      </div>
    </div>
            

         

<script type="text/javascript" src="slick/slick.min.js"></script> 
<script type="text/javascript">
    	$(document).ready(function(){
			$('.single-item').slick({
			  autoplay: true,
			  touchMove: false,
			  swipe: false,
			  swipeToSlide: false,
			  pauseOnHover: false,
			  dots: true,
			  infinite: true,
			  speed: 500,
			  fade: true,
			  cssEase: 'linear',
			  arrows: false,
			});
		});
 	</script>
            

         

slicksliderrtl

I am using the slick slider, which I think is great!! I'm using it as a full screen slider and I have what seems like 10-15 pixels extra to the right that when you touch the mouse or touchpad (using a mac) you can see that you can bring the whole slider and site over RTL about 10-15 pixels. I've removed certain classes individually to see what's causing it but still unable to pinpoint exactly where the problem is. Please help and thank you in advance for any advice!

Jim

I haven't really modified the CSS so I'm not including it because it's the CSS it comes with. I can add if you feel it necessary to properly debug however. I am using both the standard slick.css and slicktheme.css.

Another note is I'm using F5 which shouldn't matter but thought I'd mention it.

Here is the site I'm building. Forgive it's half put together look. http://furiousideasonline.com/ici-az/

<div class="single-item hide-for-small-only">
      <div class="slide"><img src="img/DSC_4204.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <a href="service.html"><button class="info">LEARN MORE</button></a>
          </div>
        </div>
      </div>
      <div class="slide"><img src="img/DSC_4212.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <button class="info"><a href="service.html">LEARN MORE</a></button>
          </div>
        </div>
      </div>
      <div class="slide"><img src="img/DSC_4230.jpg" />
        <div class="slide__caption">
          <h3 class="text-center">Any company can sell you a fire alarm system, phone system or security system. Intelligrated Communications offers you "Intelligent Integration".</h3>
          <div class="text-center">
          <button class="info"><a href="service.html">LEARN MORE</a></button>
          </div>
        </div>
      </div>
    </div>
            

         

<script type="text/javascript" src="slick/slick.min.js"></script> 
<script type="text/javascript">
    	$(document).ready(function(){
			$('.single-item').slick({
			  autoplay: true,
			  touchMove: false,
			  swipe: false,
			  swipeToSlide: false,
			  pauseOnHover: false,
			  dots: true,
			  infinite: true,
			  speed: 500,
			  fade: true,
			  cssEase: 'linear',
			  arrows: false,
			});
		});
 	</script>
            

         
Rafi Benkual over 3 years ago

Hi Jim,
Did you figure this out? I'm not seeing the spacing you mentioned in Chrome.

It's a nice site, do you work for Intellegrated?