glidejs
Spacing between items not working correctly on ipad.
Hello,
I'm using glide to display multiple items ( an image and a title below) at a time. I'm using most recent the version downloaded from github, because when using the version available via npm, the buttons only move by one item instead of the moving to the next 'view'.
It uses breakpoints to set the width and the peek of the items. I thought that it was working fine, It works in my tests with Chrome, FF, Android, Edge and IE 11. On a MacBook Air it work in Safari at full screen width and when the browser is resized down. However, critically, it doesn't work in the same way on an iPad. I've tried it on two iPad devices with the same result, testing with Safari and Chrome. The space between items is completely removed, the items (the images and the text) slightly overlap.
Does any one know a way around this, or is it just how it is? If so, then I'll have to find an alternative slider.
Assuming I'm not misusing gap, then gap doesn't seem to have any effect with the following setup. Here's the settings in use: {
type:'slider',
perView: 5,
rewind:false,
bound:true,
gap:20,
peek: {
before: 0,
after: 260
},
breakpoints: {
1600: {
perView: 5,
peek:{
before: 0,
after: 90
}
}
,1488: {
perView: 4
,peek:{
before: 0,
after: 150
}
}
,1299: {
perView: 4
,peek: {
before: 0,
after: 120
}
}
,1199: {
perView: 4
,peek: {
before: 0,
after: 220
}
}
,991: {
perView: 4
,peek: {
before: 0,
after: 85
}
}
,825: {
perView: 4
,peek: {
before: 0,
after: 85
}
}
,800: {
perView: 4
,peek: {
before: 0,
after: 70
}
}
,768: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 185
}
}
,750: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 210
}
}
,725: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 180
}
}
,700: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 160
}
}
,675: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 130
}
}
,650: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 90
}
}
,625: {
perView: 4
,peek: {
before: 0,
after: 50
}
}
,600: {
perView: 4
,gap:20
,peek: {
before: 0,
after: 10
}
}
,575: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 140
}
}
,550: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 130
}
}
,525: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 100
}
}
,500: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 70
}
}
,475: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 40
}
}
,450: {
perView: 3
,gap:20
,peek: {
before: 0,
after: 10
}
}
,425: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 120
}
}
,400: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 100
}
}
,375: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 85
}
}
,350: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 65
}
}
,325: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 50
}
}
,300: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 50
}
}
,275: {
perView: 2
,gap:20
,peek: {
before: 0,
after: 20
}
}
}
}
It seems that perView and gap don't play well together, although perView is a required property (or rather, it has a default value of 3.
The slider will force perView number of items on the screen. The slider will also add the number of pixels defined in gap as a margin. imho it renders the gap setting useless.
I am also experiencing a similar issue with gap.
I can only get the gap value to be respected when I don't set breakpoint perView values, nor pass any config for peek.
