Rails 6 个 GlideJS 轮播问题（没有 jquery）

Question

我一直在寻找一种方法来消除我项目中对 jQuery 的需求。旋转木马是我 jQuery 的最后堡垒，所以我正在尝试为不依赖 jQuery 的旋转木马设置 GlideJS。当我在 rails 控制台中运行 new Glide({}) 我得到 NoMethodError (undefined method 'Glide' for main:Object)

如果我查看 firefox 开发工具中的错误，我会看到 [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>

到目前为止，我在我的项目中没有太多的工作，如果有的话，javascript。

Answer 1

因为我对 JS 不是很了解，所以这是给了我并且很有效。

在application.js

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

Rails 6 个 GlideJS 轮播问题（没有 jquery）

Rails 6 GlideJS carousel issues (without jquery)

glidejs

ruby-on-rails-6