Not properly loading/working
Closed this issue · 1 comments
It looks like this:
So that means either I'm doing something wrong or it is a bug..
You can see that section live here, at the bottom.
https://www.institutocalma.org/
Also thanks for developing it :)
Update looks like a bug: downloaded the example from the release, and replicated my settings which causes the same problem.
These are my settings:
slidesToShow: auto, //'auto',
slidesToScroll: 1,
itemWidth: 480,
draggable: true,
scrollLock: false,
dots: '#dots',
rewind: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
Okey I solved most of the problems.. but still I can't get to display only the number of items without fractions. Also I can't hide the horizontal scrollbar without breaking the slide functionality in Firefox (though I tried the code recommended in github readme. I can't as well center items if there's space for example in larger screens.
Upadate: using this solves the space around on larger screens.
.glider-track {
margin-left:auto;
margin-right:auto;
}
Still not sure how to hide fractions of other slide items
Here's my config:
window.addEventListener('load',function(){
document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
var glider = Glider(this);
console.log('Slide Visible %s', event.detail.slide)
});
document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){
console.log('Slide Hidden %s', event.detail.slide)
});
document.querySelector('.glider').addEventListener('glider-refresh', function(event){
console.log('Refresh')
});
document.querySelector('.glider').addEventListener('glider-loaded', function(event){
console.log('Loaded')
});
window._ = new Glider(document.querySelector('.glider'), {
slidesToShow: 1, //'auto',
slidesToScroll: 1,
itemWidth: 'auto',
draggable: true,
scrollLock: false,
dots: '#dots',
rewind: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
responsive: [
{
// screens greater than >= 775px
breakpoint: 974,
settings: {
// Set to `auto` and provide item width to adjust to viewport
slidesToShow: 2,
rewind: true,
slidesToScroll: 1,
itemWidth: 482,
duration: 0.25
}
},{
// screens greater than >= 1024px
breakpoint: 1488,
settings: {
slidesToShow: 3,
rewind: true,
slidesToScroll: 1,
itemWidth: 482,
duration: 0.25
}
}
]
});
});