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