javascript - How to remove slick slide on mobile? - Stack Overflow

admin管理员组

文章数量:1357615

I'm using the awesome Slick slide on a project.

The problem is: I have a carousel with 5 divs inside. 4 images and a video.

On mobile (< 768px) I want the slider to show only the images, not the video. I tried to hide the video div by css but that's not working.

Any ideas on how to do this? Anyone had this need before?

I'm using the awesome Slick slide on a project.

The problem is: I have a carousel with 5 divs inside. 4 images and a video.

On mobile (< 768px) I want the slider to show only the images, not the video. I tried to hide the video div by css but that's not working.

Any ideas on how to do this? Anyone had this need before?

• javascript
• css
• slick.js

Share Improve this question Follow asked Sep 18, 2015 at 21:04 cassiocardosocassiocardoso 4311 gold badge11 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Look at the «Filtering» demo at the Slick's documentation. Let's use it to solve the issue.

1. Set breakpoints that you need, using the responsive option.

2. Catch the breakpoint event and read the activeBreakpoint property of the carousel. Notabene: when the screen width is greater than the last of the breakpoints, this property returns null.

3. Call slickFilter and slickUnfilter methods:

   slickFilter
   Argument filter: selector or function
   Filters slides using jQuery .filter syntax

   slickUnfilter
   Removes applied filter

4. Beware of an infinite loop: these methods cause a re-initialization of the slider, during which the breakpoint event again occurs (unless the breakpoint is null).

5. Call these methods during initialization too. Don’t forget to define the init handler before the initialization.

Check the result: https://codepen.io/glebkema/pen/NaGGzv
Slides with the .hide-on-mobile class bee hidden when the screen width is 700px or less.

var breakpointMobile = 700,
    isChanging = false,
    isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );

$('#myCarousel').on('init breakpoint', function(event, slick){  /** 2. and 5. **/
  if ( ! isChanging ) {                                         /** 4. **/
    $('#breakpointValue').text( String(slick.activeBreakpoint) );
    isChanging = true;
    if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
      if ( ! isFiltered ) {
        slick.slickFilter(':not(.hide-on-mobile)');             /** 3. **/
        isFiltered = true;
      }
    } else {
      if ( isFiltered ) {
        slick.slickUnfilter();
        isFiltered = false;
      }
    }
    isChanging = false;
  }
}).slick({
  autoplay: true,
  dots: true,
  responsive: [                                                 /** 1. **/
    { breakpoint: 500 },
    { breakpoint: 700 },
    { breakpoint: 900 }
  ]
});

body {                                                          /** Decorations **/
  font-family: 'Open Sans', sans-serif;
}
.my-carousel img {
  width: 100%;
}
.my-carousel .slick-next {
  right: 15px;
}
.my-carousel .slick-prev {
  left: 15px;
  z-index: 1;
}

<h3>Slides 2, 3 and 5 bee hidden when the screen width is&nbsp;<span id="breakpointMobile"></span>px or&nbsp;less</h3>
<p>Active breakpoint is <b id="breakpointValue"></b>. Try to resize the workspace.</p>

<div id="myCarousel" class="my-carousel">
  <div>
    <img src="https://via.placeholder./900x300/c69/f9c/?text=1" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder./900x300/9c6/cf9/?text=2" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder./900x300/69c/9cf/?text=3" alt="">
  </div>
  <div>
    <img src="https://via.placeholder./900x300/c33/f66/?text=4" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder./900x300/099/3cc/?text=5" alt="">
  </div>
  <div>
    <img src="https://via.placeholder./900x300/f93/fc6/?text=6" alt="">
  </div>
</div>

<link rel="stylesheet" href="//cdn.jsdelivr/gh/kenwheeler/[email protected]/slick/slick.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr/gh/kenwheeler/[email protected]/slick/slick-theme.css">
<script src="//cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>

Slick has the method slickRemove (you have to scroll down a bit):

Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.

I would just call this method and remove the slide with the video if your current screen size is lower than 768px.

You can unslick at a given breakpoint now by adding:

settings: "unslick"

instead of a settings object

To remove slick slider on mobile view add above code snippet to responsive breakpoint like this

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: "unslick"
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

本文标签： javascriptHow to remove slick slide on mobileStack Overflow