Glide: Click slide to advance to center position?

[St3ve89]

Such a great plugin, thanks.

In center mode, it would be nice to be able to click on a visible slide to promote it to the active position. Can you suggest an approach for this?

[oemueller]

you could simply listen to 'click' events of your slides and call the go($index) function of your glide instance.

[St3ve89]

I think, is not that simple with the clones unfortunately.

[oemueller]

It might work with data attributes:
https://codepen.io/oemueller/pen/YjowaK?editors=0100

[St3ve89]

Is there an other way to do that? If I click on the clone the carousel moves like reverse, so instead of moving left is moving right to the last item

[naaadz]

We would like it to scroll to the clone, not to the slide, in order for the glide to appear natural in _carousel_ mode. The .go method doesn't natively do this. Has anyone found a solution to this?

Thanks!

[AZRckCrwler]

I'm curious as to why this was closed, I am also trying to achieve this functionality. I'm experiencing the same problem mentioned above that is due to the clones.

[AZRckCrwler]

As a workaround, I added a data-index="" to each slide element, with respective zero-based index set.

Then this javascript. A possible improvement would be to wrap the loop in an eventListener that triggers off Glidejs' 'mount.after' event.

glide.mount(); // Mount must run first, or trigger loop below from 'mount.after' event.

let slides = document.querySelectorAll('.glide__slide');
for (let slide of slides) {
    slide.addEventListener('click', function () {
        let active = document.querySelector('.glide__slide--active');
        let target = this;
        let activeId = active.dataset.index;
        let targetId = target.dataset.index;
        let cloneClass = target.classList.contains('glide__slide--clone');

        if (targetId > activeId && cloneClass) {
            glide.go('<');
        } else if (targetId < activeId && cloneClass) {
            glide.go('>');
        } else if (targetId > activeId) {
            glide.go('>');
        } else if (targetId < activeId) {
            glide.go('<');
        }
    });
}

[Martskin]

Thanks @AZRckCrwler for sharing your solution! It helped me get mine working. I managed to add data-index to the slides and clones programmatically after mount:

// https://glidejs.com/docs/extending-components/
var CarouselComponent = function (Glide, Components, Events) {
        var carousel_keyword = {
          onMountAfter: function() {
            function gotoSlide(el, target_slide_index) {
              var is_cloned_slide = el.classList.contains(Glide.settings.classes.cloneSlide);
              var direction = target_slide_index > Glide.index ? '>' : '<';

              if (is_cloned_slide) {
                direction = target_slide_index > Glide.index ? '<' : '>'
              }

              if (!el.classList.contains(Glide.settings.classes.activeSlide)) {
                Glide.go(direction);
              }
            }

            Array.prototype.forEach.call(Components.Html.slides, function(el, i) {
              el.dataset.index = i;
              el.addEventListener('click', function() {gotoSlide(this, i)});
            });

            Array.prototype.forEach.call(Components.Clones.items, function(el, i) {
              var slide_index = i < Glide.settings.perView
                              ? Math.abs(i - (Glide.settings.perView + 1))
                              : i - Glide.settings.perView;

              el.dataset.index = slide_index;
              el.addEventListener('click', function() {gotoSlide(this, slide_index)});
            });
          },
          onRun: function() {
            // https://glidejs.com/docs/components/controls/

            // This sets the active class immediately on control clicks.
            Components.Controls.setActive();

            Array.prototype.forEach.call(Components.Html.slides, function(el) {
              el.classList.remove(Glide.settings.classes.activeSlide);
            });

            Components.Html.slides[Glide.index].classList.add(Glide.settings.classes.activeSlide);
          }
        }

        Events.on('mount.after', function () {
          carousel_keyword.onMountAfter()
        })

        Events.on('run', function () {
          carousel_keyword.onRun()
        })

        return carousel_keyword
      }

      new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 3,
        focusAt: 'center',
        gap: 0,
        breakpoints: {
          992: {
            perView: 1
          }
        }
      }).mount({
        'CarouselComponent': CarouselComponent
      });