NickPiscitelli/Glider.js

Not properly loading/working

Closed this issue · 1 comments

It looks like this:
image
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
        

    }
    }
  ]
        });
      });