CODEWITHSUNDEEP
javascripthtmljquerycssslick.js
Anastasia Stallcop
Anastasia Stallcop

Reputation: 21

Slick Slider showing 3 images i/o on mobile

I have a grid (table), I formatted it to be the same size across devices at 940px wide with overflow-scroll for mobile devices so the table can be viewed at full size by side scrolling.

I am using slick sliders to add arrow controls but have disabled all touch/swipe on it so it was only controlled by arrows. I have also set all controls to only show 1 slider at a time, however on mobile when side swiping I see all three.

Just FYI - I am using Webflow builder so I am only custom coding for slick slider.

Image of the table -desktop view - all correct enter image description here

Code inserted to disable:

swipeToSlide: false, 
arrows: false, 
draggable: false, 
touchMove: false, 
swipeToSlide: false, 
touchThreshold:0,

On mobile the carousel shows all three slides, even settings are set to 1 and arrow controls slide only one.

slidesToShow: 1, 
slidesToScroll: 1,

AND

responsive: [ 
  { 
    // tablet 
    breakpoint: 991, 
    settings: { 
      slidesToShow: 1 
    } 
  }, 
  { 
    // mobile portrait
    breakpoint: 479,
    settings: {
      slidesToShow: 1
    }
  }
]

mobile you can see more than one slide- separated by green side cells enter image description here

I want to only view one slide on mobile with an overflow side scroll grid so you can see the full grid on the side scroll but not all three slides.

Ready only: Webflow - Anastasia Stallcop Portfolio

Published

HEAD CODE

<style>

.text-contain  {pointer-events: none;}

.list::-webkit-scrollbar {
  display: none;
}

</style>

BODY CODE

<!-- NEW Dragable Slider -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<script>


// when document is fully loaded
$( document ).ready(function() {


$('.list').slick({
  dots: false,
  speed: 700,
  infinite: true,
  swipe: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  swipeToSlide: false,
  arrows: false,
  draggable: false,
  touchMove: false,
  swipeToSlide: false,
  touchThreshold:0,
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 1
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.slider-prev').click(function(){
    $("#slider-id").slick('slickPrev');
});

$('.slider-next').click(function(){
    $("#slider-id").slick('slickNext');
});


});


</script>

Upvotes: 0

Views: 1936

Answers (1)

Anastasia Stallcop
Anastasia Stallcop

Reputation: 21

I figured it out by complete accident! I was testing a different slider and noticed it would work for one but not the other, so I noticed the only different was the wrapper.

I had set the wrapper width to wider than my slider (940px is my slider so I set wrapper to 1480). I also set overflow on the parent container. Before I set it for mobile devices only it was creating a scroll bar with extra space on desktop so I modified desktop to 940px wrapper and ipad to mobile devices only to 1480 - this removed scroll bad and extra space on desktop while being perfect for mobile. YAYYYYY!

Upvotes: 0

Related Questions