Akip
Akip

Reputation: 11

Add carousel to ASP.NET MVC project using javascript and Glide.js

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. enter image description here What do I need to change to get the same result in ASP.NET as in javascript?

Upvotes: 0

Views: 74

Answers (0)

Related Questions