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

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

ただいまの
回答率

88.19%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 355

atsu-ori2018

score 5

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

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の中の記述

$(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という親要素に掛かっているせいではないかなど言われ、試したのですが変わりませんでした。

  .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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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