• サイト内検索
  • サイトマップ
  • twitter
  • pixiv

エントリー

ホーム    ブログ    サイト備忘録

freo備忘録:カルーセルスライダー【slick】導入

カルーセルスライダーslickの導入メモ。
レスポンシブ対応で設置が簡単…とちまたで評判のアレですわ。
そんなこと言ってどーせ設置大変なんでしょ┐(´д`)┌ヤレヤレ…と思って居たら、設置自体は噂通り意外と簡単に出来て驚愕。
ただ前後ナビの矢印……特に

左のprev"fxxking"矢印……

テメーだけは許さねぇ…(#^ω^)ビキビキ
最後に総まとめのデモもあり。

freoにJavaScriptを記入する際の注意事項

Javascriptのコードを直接テンプレートに記載 - freoまとめwiki
まずは基本。
freoのテンプレにjsを記入する際、()がある場合は必ず{literal}{/literal}で囲むこと!
記事投稿内に記入する場合は{literal}{/literal}で囲まない!
よく忘れてなぜ動かないんだと悩む悩むw

スライド表示用スクリプトslick導入

slick
今回のサイト再構築で是非導入したかったのが画像のスライダー。
せっかく同人サイトで本の画像があるんだから画像を色々載せたかった…(*´ω`*)
これは設置クッソ大変だろうなと思っていたら、イマドキの流行なのか解説サイトさんが一杯なのとslick自体が導入しやすさを謳ってることもあって、"画像をスライドして表示する"ってことは意外にすぐ出来た。
てかほんのちょっとの設定で画像を羅列するだけで勝手にスライドしてくれるとか……
マジすごい…Σ(´∀`;)

設置の際ちょこーっとだけ

なんでうまく動かないんだー
ヽ(`Д´)ノウワァァァン!!

ってなりましたが、それは単なるアホなミスが原因ですw

header.htmlへの記載が、slickのCDN(ファイルをご相伴させてもらう)だとちゃんと表示されるのにDLしてアップロードしたファイルで利用しようとするとなぜかCSSが読み込まれない…。
もうこれはslickを使うのをやめて違うのにしようかと…思っていた時気付きました。

slick.cssじゃなくてslick.scssをアップしていたことに……!!!

scssってなに!?知らないよw
スーパーcssとか??SRcssとかURcssとかレアカード風になってるの?w
もうアホなせいでホントくだらないことで時間食いましたが気付いてからはファイルの読み込みもちゃんと出来て問題なしです( ´Д`)=3 フゥ

slickのデザインやhtmlの書き方

jQueryカルーセル「slick.js」の使い方まとめ | Whitebear.Tech
slickってなにそれおいしいの?(^ω^)ペロペロと全くの初心者の私にとって、slickをどう設置して表示すればよいのか…というslickの仕組みを理解するのに大変手助けになったサイトです。 slickの設置の仕方を、具体的なサンプルと解説と共に、html,css,JavaScript三つのソースを表示しておりとても理解しやすいです。
カルーセルと言えばカルーセル麻紀しか知らない私ではこちらのサイトが無ければslickのシステムの理解とデザインに何時間もかかるところでしたので本当にありがたいです。
カルーセルって回転木馬って意味もあるんだよ、シャレおつだねぇ(´∀`)

レスポンシブ対応のスライダー『slick』が使いやすくておすすめ | 株式会社チップディップ
こちらではslick-theme.cssなどを詳細に解説してくださっています。
ナビの矢印の位置や大きさの変更場所、ページャー(下部の●のこと(ノ・∀・)ノ=●ウンコー!!)の大きさの変更箇所など、ちょっとココを変えたい!でもどこを弄ったらわからない!って時にとても助かりました。

素人にはslick-theme.cssを直接弄るのは危険すぎるので
freo/css/default.cssにclass指定して上書きする
ことにする。

使い勝手のいいレスポンシブ対応スライダー『slick』のオプションを紹介! | 株式会社チップディップ
同じサイトさんですがJava Scriptで指定する時の、オプションを詳細にわかりやすく解説してくださっています。オプションって何?どういうのがあるの?( ゚д゚)ポカーン…と全くわかっていない状態ではとてもありがたいです。

slickのカレントクラスを利用した実装サンプル | NxWorld
*・゜゚・*オシャンティ:.。..。.:*・゜な色々なデザインパターンをソースとサンプル込みで紹介しています。 設定の仕方についてもslickのデフォルトのCSSの指定がわからない私には「○○は△△のことで□□するために**を指定する」などといったように何のことかわかるように説明をしてくださっているので非常にありがたいです。

slick設置でよくわからなかったこと

設置と稼動は思ってたよりスムーズに出来たのだが本当の地獄はここからだった……
(´Д⊂ヽ

矢印表示やページャー●を表示せず、ただ画像をスライドさせるだけなら、特にslickのcssを弄らなくてもこのまま稼動は可能。
そう思うと設置はとっても簡単!

ただ…ちょっとcssで画像や矢印を調整したいってなると……
画像をスライドして表示するという機能とは関係のない、cssの沼にはまっていく……
(;^ν^)ぐぬぬ……

.slick-xxxを指定してもcssが効かない!

freo/css/default.cssにスリック設定用のcss(.slick-xxx)の各クラスを指定しても効かなくて、

なんでや~ヽ(`Д´)ノウワァァァン!!
となりましたが、

単純にcss読み込み優先順位の問題

だったので

header.html

slick.css
slick-theme.css


先に置いて、変更したい部分を記入した

freo/css/default.css

後に置きcssをちゃんと上書きするようにする。

ホント……

βακα..._φ(゚∀゚ )アヒ

こういう基本的なことを知らないので、今まで色々試してきて設置できねーよ!ヽ(`Д´)ノって諦めてきたスクリプト達は無罪だと思いますw

前後のナビ矢印がはみだす

前後ナビ用の矢印…というか左のprevの矢印表示との戦いはここから始まる…。
slickそのままのcssだと両矢印はslickのボックスの外に配置するようになっているので、レスポンシブ的な事情でwidth100%にすると矢印が画面外に出てしまう。

対策として、矢印を表示する場合は画像の上に配置する。
または矢印を画像の外に配置したい場合はslickのボックスをさらにボックスで囲み、そのボックスの左右にpaddingで隙間を作り、そこに矢印を表示する。

/*.carousel_box_wrapの矢印の位置*/
.carousel_box .slick-prev{
left: 10px;
}
.carousel_box .slick-next{
right: 10px;
}
画像の外に配置する場合は数値がマイナスになる
左のprev矢印だけ画像の下に配置されてしまう問題発生

画像の上に矢印を配置しようとするとなぜか

左のprev矢印だけ画像の下に配置されてしまっうぅ…
アワワ ヽ(´Д`;≡;´Д`)丿 アワワ

これを解決するために大苦戦する
(>'A`)>ニゲチャダメダニゲヂャダメダ!!

矢印位置の数値を弄ってみたり画像のリンクに透明度指定してみたり色んなclassにz-index(レイヤーを上にする的な設定)してみたり色々するたびに左のprev矢印

|д゚)チラッ|д゚)チラッ

と見えはするが画像の上に出ない……(´Д`)ハァ……。

本気で矢印表示はもう無しでいこう!( `,_・・´)フンッ思ってしばらく放置してましたw
もうほんと嫌になっちゃって⊂ミ⊃^ω^ )⊃ アウアウ!!
PCブラウザ何種類もスマホブラウザ何種類も複数のスマホ表示チェックサイトまで使ってもやはり左prev矢印は画像の下に隠れている……。
皆さんはなんの問題もなく矢印が画像の上に表示されるのかな?
'`,、('∀`) '`,、

いやあさあ、エラーが出るとかなら2,3度試してさっくり諦めるけど左prev矢印は

|д゚)チラッ

とだけど見えて存在は確認できるわけだからねw
なんとかなりそうな気がしちゃうよね……!
こういう行き詰った時はしばらく放置が一番ってことで寝かせることに……。
もうね……ブチ切れっすYO!!(^ν^;;)

で、放置して数日……新鮮な目と頭で再度ググってみるか…と色々探した結果……
ついに!ついに!解決ぅぅううう
。・゚・(ノД`)・゚・。

slick 導入・矢印画像差し替え - Qiita
こちらのサイトのcssでやっとclassが判明。
助かった……!(;゚∀゚)=3ハァハァ

矢印を上に出す指定は以下。
たったこれだけ…たったこれだけのことでどれだけ苦労したか……
cssってこわいヒィー(((゚Д゚)))ガタガタ

button.slick-prev, button.slick-next {
   z-index:2;
}
矢印をFontAwesomeにする

【slick.js】画像上の矢印をカスタマイズ(変更)し両サイド画像透過 | Puzzle(パズル)
こちらの"FontAwesomeの矢印を表示する"を参考にしました。
左prev矢印戦争を戦い抜いた後はもうサックサクですわ
( ´,_ゝ`)フヒヒ

flexboxの中にslickのボックスを入れるとド━(゚Д゚)━ン!!と広がっちゃう問題

CSSに以下を記入。

* {
min-height:0;
min-width : 0;
}
同じくflexboxの中にslickのボックスを入れると●ドット((ノ・∀・)ノ=●ウンコー!!ページャー)が縦に並ぶ問題

CSSにdisplay: flex;を記入。
で、横にはならんだけど左寄せになっているので同じところにjustify-content: center;を入れて無事ドットが真ん中に表示された。

.slick-dots{
display: flex; /*ドットを横に並べる*/
justify-content: center; /*ドットをセンター配置*/
}
読み込み時の処理

【slick】ロード時に一瞬縦並びになるのをCSSで解決する | 株式会社グランフェアズ
こちらを参考に読み込みの時に一瞬縦に

ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!

と画像が表示されるのを防ぐcssを記述する。

レスポンシブ的な問題

各slickで表示する画像はサイズ統一して作成しているので、
slick自体のボックスのcssを
width:100%
height:auto
と指定しているので、スマホでも表示されてて特に問題は無い…ぽい?(^ω^;)

cssの基本設定として
img{
max-width : 100%;
height:auto;
}
を指定してあるから特にレスポンシブの設定しなくても

画像の大きさは縦横比を保ったまま画面サイズに合わせて自動で変わる

…ってことになっているハズw
画面サイズが小さくなると画像も小さくなるから、その調整のために
レスポンシブで表示する画像の数を指定する
ってな感じ。

一枚ずつしか表示しない場合はレスポンシブの設定をオプションでしなくても問題ナス。
何枚か並べて表示する場合はレスポンシブで並べる枚数を設定する。

難しいことや素敵なデザインはせずにとりあえず画像がスライドしてその画像にリンク貼って飛べればいいや!という当初の目的は果たしたのでよしとする!
( ー`дー´)キリッ

JavaScriptが有効/無効でCSS切り替え

で!!!大事なことを忘れてた…!( ゚д゚)ッ!

javaScriptが無効の場合はslickはもちろん反映されずスライドされる中身の画像が

ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!
ド━━━━(゚∀゚)━━━━ン!!

縦に並んでるという(゜∀。)ワヒャな事態になってしまうので、

JavaScript無効の場合の時にはslickを表示させない

ようにcssで指定しました。

ブラウザのJavaScriptが有効/無効の場合で、CSSを条件分けしたい | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
こちらを参考にさせていただきました。
昔はJavaScriptオフの場合は"JavaScriptを有効にしてください。"とかそっけない代返テキストしか表示してませんでしたがオン・オフで分岐してCSSで指定できるんですね~。
いやー、時代は進化しますな~(・´з`・)

……というわけで!!
とりあえずなんとか設置完了!(_´Д`)ノ~~オツカレー
矢印表示無し!!矢印は甘え!!と最初から固い決意があれば設置はマジでめちゃ簡単すわぁ。

今のところヘッダー画像とトップの告知画像にslickを使っています。
freoのブログパーツ管理プラグイン | freo.j
ブログパーツ管理プラグインで登録した特定のブログパーツを表示する方法|虹色ミツバチ
を参考に

各slick用のブログパーツを作り、テンプレートのslick画像羅列部分に各ブログパーツIDを挿入

したので、slick用の画像のうpや編集はブログパーツプラグインで行えるのでとてもラクωチンですv
ほ…本が一杯でたらフッターにずらっと本一覧をslickで並べるのが夢なんだぜ……
( ´,_ゝ`)フヒヒ

デモ

以上色々学んだことを全部ひっくるめてとりあえず出来た画像複数表示のslickデモ。
画像の上に矢印を表示するタイプ。
画像は全部で11枚。
画像サイズは統一。
横幅可変でslickのレスポンシブブレイクポイントがやってくるまで
ギューギュ→)Д`)
になっていくタイプw

slick部分のhtml

JavaScript無効の場合は、slickボックスは表示されず、画像が一枚表示される。
JavaScript有効の場合は、slickボックスが表示され、JavaScript無効用の画像は表示されない。

<!-- slick テスト用 -->
<!-- JavaScript が有効な場合に非表示 -->
<div class="hide-enable-js">
<div class="noJS_carouse_test">
<div><img src="1.png"></div>
</div>
</div>

<!-- JavaScript が無効な場合に非表示 -->
<div class="hide-disable-js">
 <div class="carouse_test_wrap">
  <div class="carouse_test_box">
   <div><img src="1.png"></div>
   <div><img src="2.png"></div>
   <div><img src="3.png"></div>
   <div><img src="4.png"></div>
   <div><img src="5.png"></div>
   <div><img src="6.png"></div>
   <div><img src="7.png"></div>
   <div><img src="8.png"></div>
   <div><img src="9.png"></div>
   <div><img src="10.png"></div>
   <div><img src="11.png"></div>
  </div>
 </div>
</div>
<!-- slick テスト用 ここまで-->
slick部分のcss

slickを囲むボックスは.carouse_test_wrap
slick本体のボックスは.carouse_test_box


/*slick表示に関連していそう?な全体のcss指定*/
/**スマホでwidth100%はみ出し防止----------------------*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/**slickをflexboxレイアウトで使う場合広がるのを防ぐ----*/
* {
  min-height: 0;
  min-width : 0;
}

/** 画像-----------------------------------------*/
img{
max-width : 100%; /* 画面より大きくならないように */
height: auto; /*縦横比維持*/
}

/*slickのcss指定*/
/*--------------------------------------------------*/
/* slick スリック テスト用*/
/* https://kinokoz.net/freo/view/12 */
/*--------------------------------------------------*/
/*slickテスト用全体囲み 矢印表示の場合【要】指定-------*/
.carouse_test_wrap{
padding:0px; /*矢印を画像【外】の場合は左右に隙間を指定*/
width:100%;
border: 0px solid blue;
}
/*slickテスト用本体囲み 表示部分----------------------*/
/* ボックスに入れる場合そのボックスの幅分広がる */
.carouse_test_box{
width: 100%;
margin: 0 auto;
padding:0;
border: 0px solid #000;
}
/*slickテスト用 画像羅列指定--------------------------*/
/*
のようにimgをひとつずつ囲む*/ /*--------------------------------------------------*/ .carouse_test_box div { /* slick以下のdivの高さ */ height: auto; margin: 0 2px;/*画像の隙間*/ } /* スリック テスト用ボックス */ .carouse_test_box div img{ width: auto; /* ie8 */ margin: 0 auto; padding:0; } /* スリック テスト用 flexbox内配置の場合●ドット配置 */ .carouse_test_box .slick-dots{ display: flex ; /* ●ドットを横並びに */ justify-content: center; /* ●ドットを真ん中配置に */ } /* スリック テスト用 ドットの大きさ */ .carouse_test_box .slick-dots li button:before{ font-size: 15px; } /*スリック テスト用 ドットの現在画像の色 */ .carouse_test_box .slick-dots li.slick-active button:before{ color:#E60012; } /*--------------------------------------------------*/ /*スリック テスト用 矢印 前後ナビ */ /*矢印表示の場合は.carouse_test_box_wrapのpaddingに*/ /*---------------------------------------------------*/ /*スリック テスト用 矢印を画像の上に表示する*/ button.slick-prev, button.slick-next { z-index:2; } /*スリック テスト用 矢印の大きさ*/ .carouse_test_box .slick-prev, .carouse_test_box .slick-next { width: 30px; /* 矢印の大きさと同じにする */ /*Font Awesomeのアイコンが縦長なのでせまく*/ height: 100%; /* 矢印の大きさと同じにする 高さ100%にしてリンクする幅を広げる */ padding: 0; background-color: rgba(0,0,0,0.5); } .carouse_test_box .slick-prev:before, .carouse_test_box .slick-next:before { font-size: 50px; /* 矢印の大きさとの大きさ */ opacity: .8; /*矢印の透明度*/ color: white; /* 矢印の大きさと色を指定 */ } /*スリック テスト用 矢印の位置*/ .carouse_test_box .slick-prev{ left: 0px; } .carouse_test_box .slick-next{ right: 0px; } /*スリック テスト用 矢印をFontAwesomeに*/ .carouse_test_box .slick-prev::before { position: relative; font-family: "Font Awesome 5 Free"; content: "\f0d9"; font-weight: 900; -webkit-text-stroke: 1px #333;/*アイコン縁取り*/ } .carouse_test_box .slick-next::before { position: relative; font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; -webkit-text-stroke: 1px #333;/*アイコン縁取り*/ } /*--------------------------------------------------*/ /*スリック テスト用 */ /* 読み込み時、一瞬画像が一覧が出るのを防ぐ */ /*--------------------------------------------------*/ .carouse_test_box { opacity: 0; /*透明度 完全に透明:0*/ transition: opacity 0.5s linear; /* 読み込みアニメ 0.5sで0.5秒*/ } .carouse_test_box.slick-initialized{ opacity: 1; /*透明度 完全に不透明:1*/ } /*--------------------------------------------------*/ /*スリック テスト用 */ /*Java Script無効時 画像を一枚表示 --*/ /*--------------------------------------------------*/ .noJS_carouse_test{ } .noJS_carouse_test div{ margin:0 5px 0 0 ; } /*------------------------------------------------*/
Java Script

slickとJSオンオフ切り替えの記述。
スリックのクラス名は.carouse_test_boxです。


<!--slick テスト用 JavaScript -->
<!--slick テスト用 JSオンオフ切り替え -->
<script>
(function(){
  var html = document.getElementsByTagName('html')||[];
  html[0].classList.add('enable-javascript');
})();

</script>

<!--slick テスト用 slick jsコード-->
<script type="text/javascript">
$(function() {
 $('.carouse_test_box').slick({ //divクラス名
  dots: true, //黒丸表示
  arrows: true, //矢印表示
  autoplay: true, //自動スライドショー
  autoplaySpeed: 5000, //スライドショー秒数
  infinite: true, //ループする
  centerMode: true,//センターモード
  slidesToShow: 5, //何枚表示するか
  slidesToScroll: 5, //何枚スクロールするか
  responsive: [{
   breakpoint: 499, //レスポンシブ
    settings: {
     slidesToShow: 3, //何枚表示するか
     slidesToScroll: 3, //何枚スクロールするか
    }
   },{
   breakpoint: 320, //レスポンシブ
    settings: {
     slidesToShow: 1, //何枚表示するか
     slidesToScroll: 1, //何枚スクロールするか
    }
   }
  ]
 });
});
</script>
<!--slick テスト用 slick jsコードここまで-->

おしまい( ´Д`)ノ~

freo導入メモまとめは以下。
freo導入まとめ

このページのタイトルとURLをコピーする

ブログ関連記事

ユーティリティ

イベント参加予定

2019年04月29日
申込済み
2019年05月12日
申込済み
2019年05月26日
申込済み
2019年08月10日
申込済み
同人情報

新着作品

黒頭巾くんとオオカミさん2 同人誌

2019年2月17日異種ラブ新刊

書店: とらのあな アリスブックス

DL版: 後日更新予定

黒頭巾くんとオオカミさん 同人誌

2018年4月30日けもケット新刊

書店: とらのあな アリスブックス

DL版: BOOTH DiGiket DLsite FANZA

隣人注意報 前編 同人誌

2014年3月9日J.GARDEN新刊

書店: 後日更新予定

DL版: 後日更新予定

作品一覧

書店

とらのあな
アリスブックス
DiGiket.com
BL同人・ボーイズラブ・BLマンガのダウンロードなら「DLsite がるまに」