Vertical Slides?

[ManuSevenval]

Hi,

I was looking through the docs of your great library and I was wondering, if it is possible to have the slide direction on a vertical axis. I need to slide my content up and down, instead of left and right.

Is that currently possible out of the box with glide?

Thanks!!

[jedrzejchalubek]

Unfortunately, no. v3.0.0 version of glide only moves horizontally out of the box.

It's a topic for an additional extension.

[arippberger]

+1

[LukasVaculcik]

+1 for vertical sliding

[rishabh2712]

+1

[adityakbhatnagar]

+1 vertical is really important.. otherwise its a deal breaker

[jpcarpenter]

+1

[jibinycricket]

+1

[adrienbkr]

+1

[battoni]

+1

[mafftor]

+1 would be great

[mchughbri]

+1

[lukethacoder]

Anyone using a custom plugin for vertical scrolling?

[optislav]

+1 would be good

[optislav]

Do you have any suggestions how to implement this feature as plugin?

[asolopovas]

+1

[alisakataeva]

+1

[akunyiba]

+1

[jasperuitterhoeve]

+1

[stasioman]

+1

[adardesign]

+1

[adardesign]

+1

[obliviga]

+1

[carolina-morales]

+1

[Sybio]

+1

[vinescarlan]

+1 for vertical sliding. This is really necessary for most of the projects.

[vinescarlan]

Anyone found a way to extend glider.js and add vertical sliding ourselves? Thanks!

[BenRacicot]

@jedrzejchalubek I have been looking for hours and am amazed that every vertical content slider I can find is built with jQuery. I did find one, Splide. However, it is not built with modern JavaScript in terms of TypseScript or ES6/module and thus cannot be imported into any framework easily.

I believe GlideJS could have an extremely popular future with the direction you have already began with ES6.

Please consider extending Glide to include vertical direction and perhaps TypeScript. If I can help please reach out.

[lukethacoder]

Had similar requirements and stumbled upon Keen Slider (Github).

Has our much needed vertical sliders and integrates nicely with any framework. Docs have examples for React/Vue/Angular/VanillaJS implementations, which is very handy.

[BenRacicot]

@lukethacoder the Angular and TypeScript examples for Keen Slider are broken. I may have to pass on Keen :(

[simplenotezy]

No examples of "hacking" Glide around to be vertical?

[shestakov-vladyslav]

++++

[LukasVaculcik]

Glide looks discontinued. Imho one of the best slider API is Swiper. https://swiperjs.com/

[pablogiralt]

+1

[BlackKiwi89]

+1 for vertical slides

[evocarti]

Glide looks discontinued. Imho one of the best slider API is Swiper. https://swiperjs.com/

Unfortunately, it doesn't include scrolling. Only Click, and Click & Drag/Swipe.

I know we should be grateful for free code, but how hard would it have been to add a vertical option for Glidejs? Is there a way to contact the developer?

[jedrzejchalubek]

Vertical slides will not be a part of the core of Glide. The way I would recommend is to create a new extension that overrides movements, but for now, it is not a priority

[Samblazemedia]

This would be awesome to have vertical sliding. @jedrzejchalubek What is the reason that it's not currently being implemented?

[lukethacoder]

@BenRacicot Looks like its had a refresh of the docs + examples.

I'm still using keen-slider as its a great framework agnostic slider solution and has vertical support.

[pySilver]

@lukethacoder unfortunately keen-slider (which is simple and looks interesting) does some strange height calculations for vertical slides. It always sets x2 slide height for me.

[lukethacoder]

@pySilver sounds like a css issue? have you got a small example to share the issue?

[klevismiho]

I would love a vertical slide option

[radhasatam]

Here's a hacky way to do this if you know the container height -

  var glide = new Glide("#multi", {
    type: "slider",
    autoplay: 500,
    perView: perView,
    bound: true,
    dragThreshold: false,
    swipeThreshold: false,
    rewind: false
  }).on("build.after", function () {
    // Set slide height
    slides.forEach((s) => {
      s.style.height = containerHeight / perView + "px"
    })

    // translate y instead of x on run
    glide.on("run", function (move) {
      var translateY = glide.index * (-100 / perView / (countSlides / perView))
      slidesContainer.style.transform = "translate3d(0, " + translateY + "% , 0)"
    })
  })
  glide.mount()
})

This also requires css changes, mainly flex-direction

Reference: https://codepen.io/rsatam/pen/KKxJPoE

[ShahinRockstarsIT]

+1

Vertical slide