Break points
You may pass separate options for different slider widths, using break points. Break points are mobile first and specified in pixels without unit.
Every break point inherits the options from previous break point (or from the default non break point options). That way you can specify the default values once, and then override specific ones using break points.
When a break point is active, the slider container gets a tin-slide-break-point attribute with the current break point width as value. That way you can target the slider with CSS, for example using:
#slider[tin-slide-break-point="450"] .tin-slide-selected
box-shadow: 0 3px 25px rgba(0, 0, 40, 0.4);
}
TinSlide(document.getElementById('slider'), {
generate: {
nav: {
on: false
}
},
breakPoints: {
450: {
autoPlay: {
on: true,
time: 2000
},
generate: {
nav: {
on: true
},
},
cropContainer: false,
zIndex: 1,
effects: {
slideHorizontal: {
numVisible: 2,
centerSelected: true
},
scale: {
on: true,
max: 1.2,
min: 1
}
}
},
600: {
generate: {
dots: {
on: false
}
},
hideItems: false,
effects: {
slideHorizontal: {
numVisible: 3,
centerSelected: true
},
scale: {
on: true,
max: 1,
min: 0.8,
maxAt: 0.5,
minAt: 1.3
},
fade: {
on: true,
max: 1,
min: 0.1,
maxAt: 1,
minAt: 2
}
},
}
}
});