Use slick slider as an example

Menu
  1. 1. Introduction
    1. 1.1. Problem definition
    2. 1.2. Realization of a task

An example of how to initialize and re-initialize the jquery slick slider in the adaptive layout.

Introduction

In the modern design you will already extremely seldom meet the website which isn’t the adaptive (sometimes use a mobile app as alternative to an adaptive). Therefore for saving of the place, especially if there is a lot of infographic with the description, it is necessary to use different jquery sliders. As the result for the user at most of information on the device screen, so for the developer is more than interesting operation.

Problem definition

We will review an example of use of a slick slider. It is good to use him for responsive models in which there is no fixed height for visible elements more than one.
In this example on the pc we destroy a slider, but for mobile versions we initialize with settings necessary to us.

Realization of a task

We will create object with settings for our slider. In this case we will create a slider for screens with a width smaller 1024 with one visible slide.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
listInlineHover = {
slider: $('.list-inline-hover'),
sliderSettings: function(){
return {
slidesToScroll: 1,
slidesToShow: 1,
dots: true,
arrows: false,
infinite: true,
adaptiveHeight: true,
speed: 500
};
}
}

If it is necessary for permissions to 768px to show one slide, and more than 768 - two, then we use responsive property:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
slidesToShow: 2,
slidesToScroll: 2
speed: 500,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]

Initialization of a slider for mobile permissions:

1
2
3
4
5
6
7
8
9
10
11
12
listInlineHover = {
....
init: function(){
if($('.list-inline-hover').length && $(window).width() < 1024){
listInlineHover.slider.slick(listInlineHover.sliderSettings());
}
}
}
$(function() {
listInlineHover.init();
});

Now everything works if to open the page at first at a permission bigger 1024px and then to reduce to mobile version. But if to make on the contrary, then the slider will break at a re-initialized. For this purpose we will destroy it at resize of a window.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
listInlineHover = {
....
init: function(){
if($('.list-inline-hover').length && $(window).width() < 1024){
listInlineHover.slider.slick(listInlineHover.sliderSettings());
}
if (window.addEventListener) { // all browsers кроме ie 10
window.addEventListener("resize", function() {
if($(window).width() >= 1024){
if(listInlineBanner.slider.hasClass('slick-initialized')){
listInlineBanner.slider.slick('unslick');
}
} else {
if(listInlineBanner.slider.hasClass('slick-initialized')){
listInlineBanner.slider.slick('unslick');
}
listInlineBanner.slider.slick(listInlineBanner.sliderSettings());
}
}, false);
} else if (window.attachEvent) { // for ie 10
window.attachEvent("resize", function() {
if($(window).width() >= 1024){
if(listInlineBanner.slider.hasClass('slick-initialized')){
listInlineBanner.slider.slick('unslick');
}
} else {
if(listInlineBanner.slider.hasClass('slick-initialized')){
listInlineBanner.slider.slick('unslick');
}
listInlineBanner.slider.slick(listInlineBanner.sliderSettings());
}
}, false);
}
}
}

It is possible to look at result on the test page.
It is possible to download archive of an example here.