CODEWITHSUNDEEP
jqueryslick.js
David
David

Reputation: 53

Slick: set a limit on the display of sliders

How to limit sliders. For example, if the database contains more than 14 images, the slick will only display in total no more than 14 sliders(in which order it doesn't matter). Then breakpoints are used.

$('.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: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }

  ]
});

Upvotes: 0

Views: 4159

Answers (1)

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

The limitation is made by you. If you see the example on the slick website

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

and then you initialize the slick slider

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

Generate just 14 entries. So the slider will only show 14. If you use a database query do

SELECT 
    image
FROM
    imgtable
LIMIT 14;

And generate your div's (your content) e.g by a php for each loop dynamically.

Without a database just in Frontend with JQuery you can use.

Example Content (more than 14):

<div class="your-class">
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
</div>

So in Jquery you use

$('.img').each(function(index, value) {
  if (index > 13) {
    console.log('index', index);
    $(this).hide()
  }
});

See my fiddle: https://jsfiddle.net/bogatyr77/9ojvu7Lh/23/

Upvotes: 1

Related Questions