Glide: 3D Transform documentation

Created on 10 Oct 2018 · 8Comments · Source: glidejs/glide

I am currently using version 3.x only vanilla js, could you indicate where you can configure the 3D transformation on the elements as you could do in previous versions

Source

andreslopezdreams

Most helpful comment

I agree it's a bit odd to have something in the demo that isn't easily reproduced from the docs.

zinabat on 22 Nov 2019

👍8

All 8 comments

Hi, @andreslopezdreams!

I did some research on that and found quite small on that:

As you can see in the screenshot, there's a Translate function in glide.js but I didn't figure out how it works =(

I also found that as for 3D @jedrzejchalubek uses classes like .frames, .frames__list, .frames__item and .frame on the promo page glidejs.com that are linked to a specific app.css. There's nothing like that in 'glide.core.css' or 'glide.theme.css'.

Seems like it disappeared from there even it was there =(

RShalman on 21 Oct 2018

I am also interested in 3D Transforms with Glide js. How is it possible to reproduce the promo page slider?

SimonScheidler on 27 Dec 2018

👍1

I was attracted by the promo page slider, but I found that I can not do the 3D slider according to the doc, pity

Feuda on 18 Sep 2019

I found this digging through the code inside the demo,

Coverflow: function(e, t, n) {
    var i = {
        tilt: function(e) {
            (e.querySelector(c).style.transform =
                'perspective(1500px) rotateY(0deg)'),
                this.tiltPrevElements(e),
                this.tiltNextElements(e);
        },
        tiltPrevElements: function(e) {
            for (
                var t = (function(e) {
                        var t = [];
                        if (e)
                            for (; (e = e.previousElementSibling); )
                                t.push(e);
                        return t;
                    })(e),
                    n = 0;
                n < t.length;
                n++
            ) {
                var i = t[n].querySelector(c);
                (i.style.transformOrigin = '100% 50%'),
                    (i.style.transform =
                        'perspective(1500px) rotateY(' +
                        20 * Math.max(n, 2) +
                        'deg)');
            }
        },
        tiltNextElements: function(e) {
            for (
                var t = (function(e) {
                        var t = [];
                        if (e)
                            for (; (e = e.nextElementSibling); ) t.push(e);
                        return t;
                    })(e),
                    n = 0;
                n < t.length;
                n++
            ) {
                var i = t[n].querySelector(c);
                (i.style.transformOrigin = '0% 50%'),
                    (i.style.transform =
                        'perspective(1500px) rotateY(' +
                        -20 * Math.max(n, 2) +
                        'deg)');
            }
        }
    };
    return (
        n.on(['mount.after', 'run'], function() {
            i.tilt(t.Html.slides[e.index]);
        }),
        i
    );
}

It sounds like this is a custom plugin that was made, it's uglified, but I don't think its so bad that someone couldn't decipher it

ghost on 18 Sep 2019

Hello!
I want made Coverflow effects but i didn't find any informations about this.
Could you help me please?

blogaster on 18 Nov 2019

I agree it's a bit odd to have something in the demo that isn't easily reproduced from the docs.

zinabat on 22 Nov 2019

👍8

I was looking for a fix for this as well, couldn't find anything about it in the docs so I decided to recreate it from scratch (using the uglified code as an example).

This is my HTML structure, using .glide__container as my transformable container.

<div class="glide">
    <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
            <li class="glide__slide">
                <div class="glide__container">

                </div>
            </li>
        </ul>
    </div>
</div>

This is all the CSS i've used, using a black border around the container for testing purposes.

.glide__slides {
  overflow: visible;
  transform-style: preserve-3d;
}

.glide__slide {
  transform: perspective(2000px);
}

.glide__container {
  border: 2px solid #000;
  border-radius: 4px;
  width: 200px;
  height: 200px;
  transition: all 500ms ease;
  will-change: transform;
  transform-style: preserve-3d;
  position: relative;
}

Now for the fun part, I've created a custom plugin that does the tilting based on the currently active slide. It's nowhere near perfect, but it should be a good starting point for anyone who's trying to achieve the same result. Keep in mind that this only works for the 'slider' type, as the clones that glide creates when using carousel mode interfere with the transforming.

const glider = new Glide('.glide', {
  autoplay: 10000,
  type: 'slider',
  perView: 5,
  focusAt: 'center'
});

// The classname for the element that gets transformed
const tiltableElement = '.glide__container';
glider.mount({
  Coverflow: (Glide, Components, Events) => {
    const Plugin = {
      tilt (element) {
        element.querySelector(tiltableElement).style.transform = "perspective(1500px) rotateY(0deg)";
        this.tiltPrevElements();
        this.tiltNextElements();
      },
      tiltPrevElements () {
        const activeSlide = Components.Html.slides[Glide.index];

        const previousElements = [];
        const getPrevious = (element) => {
          const e = element.previousElementSibling;
          if (e) {
            previousElements.push(e.querySelector(tiltableElement));
            getPrevious(e);
          }
        };
        getPrevious(activeSlide);

        previousElements.forEach((item, index) => {
          item.style.transformOrigin = "100% 50%";
          item.style.transform = `perspective(1500px) rotateY(${20 * Math.max(index, 2)}deg)`
        })

      },
      tiltNextElements () {
        const activeSlide = Components.Html.slides[Glide.index];

        const nextElements = [];

        const getNext = (element) => {
          const e = element.nextElementSibling;
          if (e) {
            nextElements.push(e.querySelector(tiltableElement));
            getNext(e);
          }
        };
        getNext(activeSlide);

        nextElements.forEach((item, index) => {
          item.style.transformOrigin = "0% 50%";
          item.style.transform = `perspective(1500px) rotateY(${-20 * Math.max(index, 2)}deg)`
        })
      }
    }

    Events.on(['mount.after', 'run'], () => {
      Plugin.tilt(Components.Html.slides[Glide.index]);
    });

    return Plugin;
  }
});