slickを使用したスライド自動化、その他カスタム

12145 ワード
CSS JavaScript HTML slick HTML テキストリンク

説明

本記事はslickを使用した自動スライドを導入に関する記事です。

前提条件

javascriptを導入できている。スライド化するビューが用意されている。

完成コード

application.html.erb
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
index.html.erb
<% if @recommend_tweets != [] && user_signed_in? %>
    <div class="recommend">
      <ul class="recoTweet-lists slider">
        <%  @recommend_tweets.each do |tweet| %>
          <li class='recoTweet-list'>
            <%= link_to tweet_path(tweet.id), remote: true, class: "show-link" do %>
              <% if tweet.image.attached? %>
                <%= image_tag tweet.image, class: "recoTweet-img" %>
              <% else %>
                <div class="recoTweet-img"></div>
              <% end %>
              <div class="recoTweet-ttl"><%= tweet.title %></div>
              <div class="recoTweet-message"><%= tweet.message %></div>
              <div class="recoTweet-txt"><%= current_user.name %>さんへオススメの投稿</div>
            <% end %>
          </li>
        <% end %>
      </ul>
    </div>
  <% end %>
tweet.scss
.slider{
  margin: 50px auto;
  width: 100%;

  @media (max-width: 1024px) {
    width: 90%;
  }

  @media (max-width: 767px) {
    width: 100%;
  }
}

.slick-next {
  right: 10px !important;
  z-index: 100;  
}

.slick-prev {
  left: 0 !important;
  z-index: 100;
}

.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: #000  !important;
}
script.js
//slide
  $('.slider').slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToScroll:1,
    slidesToShow: 3,
    pauseOnHover: false,
    arrows: true,
    responsive: [
      {
        breakpoint: 1025,
        settings: {
          slidesToShow: 1,
          arrows: false,
        }
      },
    ]
  });

slick導入

application.html.erb
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

htmlのhead部分に上記の記載をすることでslickを使えるようにします。

ビューの修正

index.html.erb
<ul class="recoTweet-lists slider">
</ul>

自身のスライドにしたい複数の要素を囲んでいる一つ上の要素にsliderクラスを追加してあげます

slick設定

script.js
//slide
  $('.slider').slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToScroll:1,
    slidesToShow: 3,
    pauseOnHover: false,
    arrows: true,
    responsive: [
      {
        breakpoint: 1025,
        settings: {
          slidesToShow: 1,
          arrows: false,
        }
      },
    ]
  });

ビューの修正で追加した、sliderクラスに対して設定します。上から順に解説します。

dots: true ｜　ページ送りを確認できるドットを表示する

autoplay: true ｜　自動でスライドするようにする

autoplaySpeed: 3000 ｜　スライドする感覚を3秒にする

slidesToScroll:1 ｜　スライドの際何枚分スライドするかの設定

slidesToShow: 3 ｜　スライドを何枚表示するか

pauseOnHover: false ｜　ホバーした際にスライドが止まらない設定

arrows: true ｜　スライドを送るアローボタンを表示する設定

responsive部分はbreakpointで指定したい幅の時に設定が変わるようにするレスポンシブ用の記述です。

スライドの見た目の詳細設定

tweet.scss
.slider{
  margin: 50px auto;
  width: 100%;

  @media (max-width: 1024px) {
    width: 90%;
  }

  @media (max-width: 767px) {
    width: 100%;
  }
}

.slick-next {
  right: 10px !important;
  z-index: 100;  
}

.slick-prev {
  left: 0 !important;
  z-index: 100;
}

.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: #000  !important;
}

スライドのアローボタンには右のボタンにslick-nextクラス、左にはslick-prevクラスが設定されているのでアローの見た目はそのクラスに当てることで設定できます。!importantはcssが反映されない時にこのcssを優先させるという記述なのでcssが効かない時だけ記述してください。

まとめ

今回はslickを用いた自動スライドとその見た目の書き方について記載しました。閲覧ありがとうございました。

JavaScriptベース(1)prototypeの理解?
python plot_の使用Modelはモデル図を描画します(エラー`pydot`failed to call GraphViz.Please install GraphViz(https://www.gr)