jquery - 当通过链接访问站点时，Rails Turbolinks 混淆了我的 slider

Question

我的 slider 在正常页面加载(即刷新或首次打开)后看起来完全正常，但是当您点击链接转到 slider 所在的页面时，它会搞砸。我为此责怪 Turbolinks。它确实让我的网站运行得更快，所以我不想放弃它。

显然，我正在从事的元素是在 Rails 上进行的。

这是它通常的样子:

这是您点击链接查看页面时的样子

我正在为 slider 使用 Tinycarousel:https://baijs.com/tinycarousel/

我真的不知道该尝试什么，因为这是我第一次使用 Rails，因此我一直停留在这个问题上，没有任何选择可以继续。

这是 slider 的 CSS:

/* Tiny Carousel */
#latest-products { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }
#latest-products .viewport { height: 235px; overflow: hidden; position: relative; }
#latest-products .buttons {
    display: block;
    position: absolute;
    top: 20%;
    left: 0;
    width: 46px;
    height: 70px;
    color: $d_deep_red;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 50px;
    transition: all .25s ease-in-out;
}
#latest-products .next {
    right: 0;
    left: auto;
    top: 20%;
}

#latest-products .buttons:hover {
    color: darken($d_deep_red, 10%);
}

#latest-products .disable { visibility: hidden; }
#latest-products .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; }
#latest-products .overview li{ float: left; margin: 0 30px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
#latest-products .overview li img {border: 6px solid $d_caramel_orange;}

如有任何帮助，我们将不胜感激。

Answer 1

您可以在没有 turbolinks 的情况下加载页面.只需将其添加到 link_to助手:

<%= link_to "link text", link_path, :"data-no-turbolink"=>true %>

这将导致为特定链接加载整个 Assets 库。

如果你不想这样，这是完全可以理解的，那么你可以添加所有 js和 css对于 carussel(如果它特定于一个 View )到 View 本身。因此，它们将加载 View 并正常呈现。

更新 - 更正:删除了最终 s来自 data-no-turbolink