slick を使って スライドの実装

Question

slickを使いスライドの実装を行いました。

http://localhost:3000/
のトップページ上でスライドショー完成していますが

id埋め込んでいるボタンを押して
トップページのその部分に飛んでいったら

スライドショーにしていた部分のveiwが崩れて
イベント発火していない状態になります

下記がトップページの状態です

下記がveiwの崩れている状態です。　　
jQueryのコードが効いてなくて、本来スライドショーの中にある複数の写真が下に追加されている感じです。

正しいググり方もわからず解決の意図が見えていません

何か参考になることでもいいので何か教えてください。

Answer 1

ページの画像ももちろん参考になりますが、せっかくプログラミングしていただいた物なのでコード自体を載せていただけると答えがいもあると思います！

Comments

[MISIAN-MISIAN]

コメントありがとうございます。参考になります。

トップページの状態ではイベント発火しているので
コード見せてもあってると思い
写真にしました。。。。。

[TakuF]

そうなんですね！
コードが合っている上でどのような記述で質問者さまが実行しようとしているか理解したかったのですが、残念です。

[MISIAN-MISIAN]

```
jsファイル

$(function() {
$('.advertisement-box').slick({
dots: true,
// 下のドット表示

autoplay: true,
// 自動再生。trueで自動再生される。
speed: 400,
// 自動再生や左右の矢印でスライドするスピード
autoplaySpeed: 3000,
// 自動再生で切り替えをする時間
accessibility: true,
// アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
});
});
```

```
index.html.haml

.main-top
.advertisements
.advertisement
%ul.advertisement-box
%li
= image_tag "pictweet.jpg", class: "scroll-advertisement one"
%li
= image_tag "sns_01.jpg", class: "scroll-advertisement second"
%li
= image_tag "pictweet.jpg", class: "scroll-advertisement third"
.icon-icon-two
= link_to "https://itunes.apple.com/jp/app/id667861049?l=ja&mt=8" do
=image_tag "https://web-jp-assets.mercdn.net/_next/static/images/app-store-a5c17948c6fd6d5b60b13d421cd60b35.svg", class:"apple apple-one", alt: ""
= link_to "https://play.google.com/store/apps/details?id=com.kouzoh.mercari&hl=ja" do
=image_tag "https://web-jp-assets.mercdn.net/_next/static/images/google-play-495575abb895b405aa6336b2a4304958.svg", class: "google google-one", alt: ""

```

すみませんよろしくお願いします

Answer 2

$(document).on('turbolinks:load', function() {})
追加したら治りました。
ありがとうございました。