CODEWITHSUNDEEP
javascriptcssglidejs
Absulit
Absulit

Reputation: 1955

How to add slideWidth into a breakpoint in Glide.js

I have to set the slide width to a specific size if the viewport is between a range.

breakpoints: {
   767: {
      perView: 1,
      peek: 193,
      slideWidth: 277
   },
   1023: {
       perView: 1,
       peek: 212,
   }
}

The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it. The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.

I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.

Upvotes: 4

Views: 6249

Answers (2)

Vally Pepyako
Vally Pepyako

Reputation: 141

I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div

.glide-wrapper {
  max-width: 100vw;
  overflow: hidden;
}

.glide {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.glide__track {
  overflow: visible!important;
}

const glide = new Glide('.glide', {
  type: 'carousel',
  breakpoints: {
  1280: {
    gap: 16,
    focusAt: "center",
    perView: 1,
    peek: {
      before: 16,
      after: 16
    },
  },
}
}).mount({Swipe, Controls, Breakpoints });

Upvotes: 0

Tomáš Kahánek
Tomáš Kahánek

Reputation: 27

Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo

new Glide('#glide1', {
    type: 'carousel',
    perView: 3,
    breakpoints: {
        800: {
            perView: 1
        }
    }
}).mount();

Upvotes: 1

Related Questions