Według dokumentacji można to zrobić np. w ten sposób:
var input = document.querySelector('#options-per-view-input')
var glide = new Glide('#options-per-view', {
perView: input.value
})
input.addEventListener('input', function (event) {
glide.update({
perView: event.target.value
})
})
glide.mount()
Ale nie za wiele mi to mówi. Próbowałem po swojemu w ten sposób (Nigdy wcześniej nie pisałem czegokolwiek w js, więc może nie być sensu tego czytać):
<script>
function changeSlider(Glide glide,
var x) {
if (x.matches) { // If media query matches
glide.update({
perView: 3
})
glide.mount()
}
}
</script>
<script>
var glide = new Glide('.glide', {
type: 'carousel',
startAt: 0,
perView: 5
}).mount()
var x = window.matchMedia("(max-width: 864px)")
changeSlider(glide, x);
x.addListener(changeSlider)
</script>
Generalnie za dużo niewiadomych tutaj dla mnie..a domyślam się, że to proste i krótkie, więc liczę na to, że ktoś mi tę funkcję tutaj napiszę/powie dokładniej jak to zrobić.