ruby-on-rails-6glidejs

Rails 6 GlideJS carousel issues (without jquery)


I have been looking for a way to remove the need for jQuery in my project. The carousel is my last bastion of jQuery, so I am trying to set up GlideJS for a carousel with does not rely on jQuery. When I run new Glide({}) in rails console I get NoMethodError (undefined method 'Glide' for main:Object)

If I look at the errors in the dev tools in firefox I am seeing [Glide warn]: Root element must be a existing Html node / Uncaught TypeError: this.root is undefined.

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")

import 'controllers'
import "bootstrap"

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

frontpage.html.erb

<div class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">slide1</li>
        <li class="glide__slide">slide2</li>
        <li class="glide__slide">slide3</li>
        <li class="glide__slide">slide4</li>
      </ul>
    </div>

    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
    </div>
</div>

I have not worked with much, if any, javascript in my projects to date.


Solution

  • As I am not savy on JS, this was given to me and it worked.

    In the application.js

    document.addEventListener("turbolinks:load", () => {
        new Glide('.glide', {
                }).mount()
    })