【JS】slick.js|サムネイル付きで縦に配置する

Javascript

スライダー機能を簡単に導入できるslick.jsを使う場合、通常は下にサムネイル挿入されているものがほとんどです。
ですが、サムネイル付きのスライダーは2つのスライダーを使用しているので自由に位置の変更や修正ができます。
また、スクロールさせずにフォーカスと切り替えを行うようにする部分は下記を参考にしています。

slick.jsでサムネイル付きスライダーを作成する
何度か取り上げているslick.jsの使い方ですが、今回はサムネイル付きスライダーを作成します。サムネイルがスライダーのものや、サムネイルを固定した(サムネイルをスライドさせない)スライダーなどいくつか紹介します。

ここではslickの基本導入が設定されている前提でソースを紹介しますので、実装がまだの場合は下記を参考にslickの実装をしてください。

スライダーをslick.jsを使用してい実装する方法
スライダーを導入する時に全て自作でとなると相当大変な上に変な動きになったりしてしまい、上手くいかないことが多いかと思います。 そんな時はツールを使うと簡単に実装することが出来ます。 ここで...続きを読む

 

  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像

HTMLソース

 

CSS

JS

 

コメント

  1. 555 より:

    何回やってもこれでできたことがない

タイトルとURLをコピーしました