'Slick slider mobile:first param not working (responsive not working)

I have slick slider implemented on a module and here's a summary of how I'm wanting it to function:

<= 767px screen width: show dots (no arrows) and 1 slide.
>= 768px: hide dots, show custom arrows and show 2 slides.
>= 992px: Show 2.5 slides with no dots, and custom arrows (should inherit from above breakpoint settings).
>= 1200px: Show 3.2 slides
>= 1600px: Show 3.5 slides

Current behaviour

The default setting works. It shows the dots and one slide for <= 767px. However, when I test on a iPad (768px), it removes the dots (which is good), shows the arrows (which is good), but still only shows the 1 slide, when I have 2 defined. Then on anything above this width, it is still showing one slide.

I have mobileFirst: true defined, so unsure why it's like this?

See demo here:

$(function() {

  var $slider = $("#section-slick");

  var slickOptions = {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: true,
    // infinite: true,
    mobileFirst: true,
    autoplay: false,
    fade: true,
    responsive: [{
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
          prevArrow: $(".section__nav-prev"),
          nextArrow: $(".section__nav-next"),
          mobileFirst: false,
          arrows: true,
          dots: false,
          infinite: false,
        }
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 2.5,
        }
      },
      {
        breakpoint: 1199,
        settings: {
          slidesToShow: 3.2,
        }
      },
      {
        breakpoint: 1599,
        settings: {
          slidesToShow: 3.5,
        }
      }
    ]
  };

  $($slider).slick(slickOptions);

  $(window).on('resize orientationchange', function() {
    $($slider).slick("resize");
  });

});

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
  --green: #00FF97;
}

section__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

section__nav-next {
  margin-left: 26px;
}

section__nav-arrow {
  cursor: pointer;
}

section__nav-arrow svg:hover path {
  fill: var(--green);
}

section__nav-arrow.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}

section figure {
  padding: 50px;
  background-color: var(--black);
  color: var(--white);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="section">

  <div class="container d-none d-md-block">
    <div class="row justify-content-end">
      <div class="col-2">
        <div class="section__nav">
          <div class="section__nav-arrow section__nav-prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
              <path data-name="Icon ionic-ios-arrow-back" d="M15.321,18l8.937-8.93a1.688,1.688,0,0,0-2.391-2.384L11.742,16.8a1.685,1.685,0,0,0-.049,2.327L21.86,29.321a1.688,1.688,0,0,0,2.391-2.384Z" transform="translate(-11.251 -6.194)" />
            </svg>
          </div>
          <div class="section__nav-arrow section__nav-next">
            <svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
              <path data-name="Icon ionic-ios-arrow-back" d="M20.683,18,11.746,9.07a1.688,1.688,0,0,1,2.391-2.384L24.262,16.8a1.685,1.685,0,0,1,.049,2.327L14.144,29.321a1.688,1.688,0,0,1-2.391-2.384Z" transform="translate(-11.251 -6.194)" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div id="section-slick">

          <figure>Card 1</figure>
          <figure>Card 2</figure>
          <figure>Card 3</figure>
          <figure>Card 4</figure>

        </div>
      </div>
    </div>
  </div>
</section>

Solution 1:^[1]

Problems & Fixes

included missing slick CSS
removed fade: true property
added breakpoint: 480

$(function() {

  var $slider = $("#section-slick");

  var slickOptions = {
    prevArrow: $(".section__nav-prev"),
    nextArrow: $(".section__nav-next"),
    mobileFirst: true,
    autoplay: false,
    responsive: [{
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          arrows: false,
          dots: true,
          infinite: false,
          mobileFirst: true,
        }
      }, {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 2.5,
        }
      },
      {
        breakpoint: 1199,
        settings: {
          slidesToShow: 3.2,
        }
      },
      {
        breakpoint: 1599,
        settings: {
          slidesToShow: 3.5,
        }
      }
    ]
  };

  $slider.slick(slickOptions);

});

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
  --green: #00FF97;
}

section__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

section__nav-next {
  margin-left: 26px;
}

section__nav-arrow {
  cursor: pointer;
}

section__nav-arrow svg:hover path {
  fill: var(--green);
}

section__nav-arrow.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}

section figure {
  padding: 50px;
  background-color: var(--black);
  color: var(--white);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<section class="section">

  <div class="container d-none d-md-block">
    <div class="row justify-content-end">
      <div class="col-2">
        <div class="section__nav">
          <button class="section__nav-arrow section__nav-prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
              <path data-name="Icon ionic-ios-arrow-back" d="M15.321,18l8.937-8.93a1.688,1.688,0,0,0-2.391-2.384L11.742,16.8a1.685,1.685,0,0,0-.049,2.327L21.86,29.321a1.688,1.688,0,0,0,2.391-2.384Z" transform="translate(-11.251 -6.194)" />
            </svg>
          </button>
          <button class="section__nav-arrow section__nav-next">
            <svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
              <path data-name="Icon ionic-ios-arrow-back" d="M20.683,18,11.746,9.07a1.688,1.688,0,0,1,2.391-2.384L24.262,16.8a1.685,1.685,0,0,1,.049,2.327L14.144,29.321a1.688,1.688,0,0,1-2.391-2.384Z" transform="translate(-11.251 -6.194)" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div id="section-slick">

          <figure>Card 1</figure>
          <figure>Card 2</figure>
          <figure>Card 3</figure>
          <figure>Card 4</figure>

        </div>
      </div>
    </div>
  </div>
</section>

Solution 2:^[2]

You are using slick slider without adding it's css file, which is important. Also its recommended to add break points through css media queries.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	User863
Solution 2	RVFET

'Slick slider mobile:first param not working (responsive not working)

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]