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();