Reputation: 11
I want to add a carousel to my .cshtml page. I'm trying to do it by using javascript withe the Glide.js library. This tutorial does exactly what I'm trying to achieve, except I'm trying to replicate it in an ASP.NET project. \
I installed node.js using nuget, then I installed the Glide.js library in my wwwroot directory using LibMan (as described here).
Next I added the following code to my .cshtml file:
<div class="container" style="width:300px">
<div class="glide">
<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>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
<script src="@Url.Content("~/Glide.js/glide.min.js")"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const config = {
type: 'carousel',
perView: 3,
};
new Glide('.glide', config).mount();
});
</script>
I also linked the css stylesheet in _Layout.cshtml using this line:
<link rel="stylesheet" href="~Glide.js/css/glide.core.min.css"/>
I'm trying to achieve a carousel that alternates between 3 elements but the result is as shown in the picture below and the buttons only move the column to the left and right.
What do I need to change to get the same result in ASP.NET as in javascript?
Upvotes: 0
Views: 74