質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

slick sliderでslideが反映されない。(リロードすると普通に動作する)

atsu-ori2018
atsu-ori2018

総合スコア5

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0回答

0リアクション

0クリップ

304閲覧

投稿2020/06/02 13:11

railsでslick.sliderを使用し商品のスライドショーを作成しています。
サムネイル画像と連動させる形のスライドを実装したのですが、該当ページにアクセスすると、slickのクラスも反映されておらず、スライドがなりません。
ページをリロードしてみて、検証で確認をしてみるとslickのクラスが反映されていて通常通りスライドショーが動きます。

hamlの中の記載はこのようになっています。

haml

.main-container .item-photos %ul#slider %li.slide-item = image_tag "/images/test_image.jpg",alt:"test-image",class:"slide-image" %li.slide-item = image_tag "/images/logo.png",alt:"test-image",class:"slide-image" %li.slide-item = image_tag "/images/test_image.jpg",alt:"test-image",class:"slide-image" %ul#thumbnail-list %li.thumbnail-item = image_tag "/images/test_image.jpg",alt:"test-image",class:"thumbnail-image" %li.thumbnail-item = image_tag "/images/logo.png",alt:"test-image",class:"thumbnail-image" %li.thumbnail-item = image_tag "/images/test_image.jpg",alt:"test-image",class:"thumbnail-image"

slider.jsの中の記述

slider.js

$(function(){ var slider = "#slider"; var thumbnailItem = "#thumbnail-list .thumbnail-item"; $(thumbnailItem).each(function(){ var index = $(thumbnailItem).index(this); $(this).attr("data-index",index); }); $(slider).on('init',function(slick){ var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); }); $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ $(thumbnailItem).each(function(){ $(this).removeClass("thumbnail-current"); }); $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); }); $(thumbnailItem).on('click',function(){ var index = $(this).attr("data-index"); $(slider).slick("slickGoTo",index,false); }); $(slider).slick({ arrows: false, fade: true, infinite: false, centerMode: true, }); });

色々と調べて、display:flexがitem-photosという親要素に掛かっているせいではないかなど言われ、試したのですが変わりませんでした。

scss

.main-container { display: flex; margin-top: 16px; .item-photos { min-width: 300px; max-width: 300px; min-height: 375px; display: flex; flex-direction: column; justify-content: center; margin: 0; #slider{ width: 300px; height: 320px; margin:0 auto 30px; display: flex; .slide-item{ max-height: 300px; max-width: 100%; height: 300px; width: 300px; .slide-image{ width: 100%; height: 100%; margin: 0 auto; } } } #thumbnail-list{ width: 300px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap:wrap; .thumbnail-item{ margin-bottom: 10px; box-sizing: border-box; position:relative; height: 60px; width: 60px; &::after{ content:''; background-color: rgba(0,0,0,0.5); position:absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: .3s opacity linear; } &.thumbnail-current:after{ opacity: 0; } .thumbnail-image{ width: 100%; height: 100%; margin: 0 auto; } } } }

ページに遷移した時にだけslickのクラスが当たらないというのは何が可能性としてあるでしょうか。。。
ご教授頂けますととても助かります。
よろしくお願いします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。