CODEWITHSUNDEEP
javascriptglidejs
Dennis Bohn
Dennis Bohn

Reputation: 141

Align first and last item in a glidejs individually

I am using glidejs for some slideshows on a webpage and I love it. Now I want to slide some content. The first element should be aligned left, the last aligned right and all other elements aligned centered.

I got some good results with focusAt for the first element, but it doenst seem to work for the last element.

var glide = new Glide('#glide', {
  type: 'slider',
  focusAt: 'center',
  perView: 1.5,
  focusAt: 0
})

glide.on("run", () => {
  var focusAt = "center";
  if (glide.index === 0) focusAt = 0;
  glide.update({
    focusAt: focusAt
  });
});

glide.mount();
#glide {
  text-align: center;
}

.glide__track {
  border: 2px solid #000;
  width: 300px;
  margin: 10px auto;
}

.glide__slide {
  height: 150px;
  text-align: center;
  line-height: 150px;
  border: 2px solid #000;
  background-color: #ccc;
  font-size: 64px;
  font-weight: bold;
  font-family: arial;
  color: #999;
}

.glide__bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  padding: 0;
}

.glide__bullet--active {
  background-color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.5.0/glide.min.js"></script>
<div id="glide" class="glide glide--ltr glide--slider glide--swipeable">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
      <li class="glide__slide">3</li>
      <li class="glide__slide">4</li>
    </ul>
  </div>
  <div data-glide-el="controls">
    <button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
      </svg>
    </button>
    <button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
      </svg>
    </button>
  </div>
  <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>    
      <button class="glide__bullet" data-glide-dir="=3"></button>    
      <button class="glide__bullet" data-glide-dir="=4"></button>    
  </div>
</div>

Any ideas?

Upvotes: 2

Views: 834

Answers (1)

Dennis Bohn
Dennis Bohn

Reputation: 141

Solved the problem with a mutator.

const glide = new Glide(container, {
  type: "slider",
  perView: 1.25,
  focusAt: 0,
  gap: 20,
});

const mutator = function (Glide, Components, Events) {
  return {
    modify(translate) {

      // First slide
      if (Glide.index === 0) {

        // Move slide 20 pixels from left
        return translate - 20;

      // Last slide
      } else if (Glide.index === Components.Sizes.length - 1) {

        // Move slide 20 pixels from right
        return translate - (Components.Sizes.width - Components.Sizes.slideWidth) + 20;
      
      // Other slides
      } else {

          // Center slide
          return translate - (Components.Sizes.width - Components.Sizes.slideWidth) / 2;

      }
    },
  };
};

glide.mutate([mutator]).mount();

Upvotes: 0

Related Questions