超超初心者向け漫画サイトのつくり方【slickで、漫画ページをつくる】

優秀スライダーslickくんをカスタマイズして、漫画ページに適したスタイルにしていこうと思います～

とりあえず最初にことわっておきます。

センスを紛失中なので、見た目はアレです。

カスタマイズ方法さえ分かれば、あなたのセンスでステキになりますのでご勘弁ください。

  1. 最終形態
  2. slickを動かす記述
  3. ページ番号の表示方法
  4. 漫画左右の＜＞を自作した場合

最終形態

しょっぱなから最終形態。

デモページ

↑動く姿を確認してみてください。

右から左にページが流れるという、漫画っぽいページ流れに変更しています。

あと、ページ数が分かるようにページ番号も可視化しました。

最終ページに行くと、スライダーを止まるようにもしています。（デフォルトでは、最終ページに行くと最初のページに戻って延々ループするようになっています。）

slickを動かす記述

↓の記事を読んでもらっている前提で書きます。

超超初心者向け漫画サイトのつくり方【jQueryで、しゅっしゅって画像を流す】

＜script＞～＜/script＞の間に記述した、slickを動かすための呪文を、漫画ページっぽく書き換えます。

$('.single-item-rtl').slick({
dots: true,      
dotsClass: 'ページ番号の名前',      
infinite: false,      
prevArrow: '<img src="右側の＞の画像" class="画像の名前">',
nextArrow: '<img src="左側の＜の画像" class="画像の名前">',      
rtl: true    
});

これで、デモのようにslickを動かす呪文は完了です。

が

これだけでは動かないと思います。

このslickを動かすために、ｈｔｍｌも関連付けなければいけません。

具体的に記載してみます。

<div class="single-item-rtl" dir="rtl">
<img src="漫画１ページ目の画像" alt="">
<img src="漫画２ページ目の画像" alt="">
<img src="漫画３ページ目の画像" alt="">
<img src="漫画４ページ目の画像" alt="">
<img src="漫画５ページ目の画像" alt="">
</div>

画像を囲っているdivに、slickを動かすための呪文で使ったのと同じ名前を付与します。

今回は、$(‘.single-item-rtl’)としているので、divのclass名を同じ
single-item-rtlとしました。

それに加え、右から左へ流すためには、dir=”rtl”という記述も必要です。これを忘れると、やっぱり動きません。

以上の記述をすれば、漫画っぽいページ流れのスライダーの完成です。

ページ番号の表示方法

slickを動かすための呪文で、dotsClass: ‘ページ番号の名前’があります。この’ページ番号の名前’をCSSで装飾します。

「ページ番号の名前」は、半角英数字で好きな名前にしてください。

.ページ番号の名前 {
list-style: none;
display: flex;
}
.ページ番号の名前 li {      
padding-left: 10px;
}  
.ページ番号の名前 button {
background: #c2c2c2;
color: #333;      
font-weight: bold;      
opacity: .5;      
border-radius: 10px;      
cursor: pointer;    
} 
.slick-active button {      
opacity: 1;    
}

background: #c2c2c2→ページ番号の背景色を変えたい時は、この数字を変更してください。

color: #333→ページ番号の文字色を変えたい場合は、この数字を変更してください。

漫画左右の＜＞を自作した場合

デフォルトを利用する場合は、slickを動かすための呪文の

prevArrow: ‘<img src=”右側の＞の画像” class=”画像の名前”>’
nextArrow: ‘<img src=”左側の＜の画像” class=”画像の名前”＞’

↑以上の２行を削除してください。

自作した場合のみ、CSSの記述をしていきます。

.画像の名前（右側） {      
position: absolute;      
top: 50%;      
margin-top: -35px;      
right: -25px;      
left: auto;    
}   
.画像の名前（左側） {      
position: absolute;      
top: 50%;      
margin-top: -35px;      
right: auto;      
left: -25px;    
}
.slick-disabled {      
opacity: .5;    
}

margin-top: -35pxは、好きに調整してください。これはサイトデザインや、画像サイズによるものなので、数字を変えてみたり削除してみたりしてください。

これで、slickを使った漫画ページの完成です！

あまりにもページ数多いと、表示に時間が掛かるのでその点だけお気をつけを～

コメント

ホーム
トップ