Glide Carousel v1.9.0


For more information please check Full Github Documentation.

Here is a coded example:

<div class="row">
  <div class="col-md-12 col-md-6">
  <div class="glide">
    <div class="glide__track pl-5" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <img src="https://images.unsplash.com/photo-1540206395-68808572332f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" height="500" width="450" rel="nofollow">
        </li>
        <li class="glide__slide">
          <img src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" height="500" width="450" rel="nofollow">
        </li>
        <li class="glide__slide">
          <img src="https://images.unsplash.com/photo-1491378630646-3440efa57c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" height="500" width="450" rel="nofollow">
        </li>
        <li class="glide__slide">
          <img src="https://images.unsplash.com/photo-1512100254544-47340ba56b5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80" width="450" rel="nofollow">
        </li>
        <li class="glide__slide">
          <img src="https://images.unsplash.com/photo-1531386450450-969f935bd522?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80" height="500" width="450" rel="nofollow">
        </li>
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<" style="left: 40%; bottom: -120px;"><i class="ni ni-bold-left text-default"></i></button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">" style="bottom: -120px;"><i class="ni ni-bold-right text-default"></i></button>
    </div>
  </div>
  </div>
</div>



<!-- javascript for the init -->

  // Carousel
  new Glide('.glide', {
    type: 'carousel',
    startAt: 0,
    focusAt: 2,
    perTouch: 1,
    perView: 4
  }).mount();