スライダー

2021/8/30

slickスライダー実装まとめ15選

slickってどんなスライダーが出来るの？スライダーで有名なプラグイン、slickにはオプションを使って色々なスライダーを実装することが出来ます。実務でも色々なタイプのスライダーを実装することになるので、どんなタイプのスライダーも実装出来るようにしておきましょう。 slickスライダー実装まとめ15選今回はslickを使ったスライダーの実装集となります。コードについてはデモのHTML、CSS、JSをクリックすれば確認出来るので、コピペしてお使い下さい。またスライダーをリロードしたい時はデモの右下 ...

Web制作コーディングスライダー

2021/8/28

slickスライダーで特定のスライドだけ表示時間を変える方法

スライダーで1枚ごとに表示時間を変えることって出来る？普通のスライダーは全部表示時間が同じですが、1枚目だけ長くしたい時などたま〜にあります。今回はslickを使ってその方法をご紹介します。 slickスライダーで特定のスライドだけ表示時間を変える方法まずはデモを見てみます。 See the Pen slick（時間調整） by junpei (@junpei-sugiyama) on CodePen. 1枚目のスライドはこの画像です。そして今回設定したのは、 1枚目の初回は3000ミリ秒 1枚目 ...

Web制作スライダー

2021/8/27

【slick】サムネイルクリックで画像が切り替わるスライダーの作り方

slickでサムネイル付きのスライダーって作れない？色々なタイプが作れるよ！今回はslickを使ったサムネイル付きのスライダーをいくつかご紹介していきます。 slickを使った事がない人はこちらの記事を参照下さい。レスポンシブ対応のスライダープラグイン「slick」の使い方サムネイル付きスライダー（サムネイルクリックでメインスライド変更）まずはサムネイルが3枚で、サムネイルをクリックするとメインの画像が切り替わるスライダーです。 See the Pen slick（サムネイル：） by junp ...

Web制作スライダー

2021/8/27

【slick】スライダーの中央だけ大きく（左右の画像は小さく）する方法

slickスライダーで中央だけ大きくさせる方法ない？出来るけどちょっと注意点があるよ！今回はそんな疑問にお答えします。 slickで中央の画像だけ大きくする方法まずはslickを使えるようにします。 slickを使った事がない人はこちらの記事を参照下さい。レスポンシブ対応のスライダープラグイン「slick」の使い方それでは最初に完成形を見てみます。 See the Pen by junpei (@junpei-sugiyama) on CodePen. 中央の画像が大きく、左右の画像は小さく薄く ...

Web制作スライダー

2021/8/27

【slick】スライドの総数と現在のスライドが何番目か表示させる方法

slickのスライダーでスライドの数って表示出来ない？スライドの総数と現在のスライドが何番目か表示させられるよ！ DEMO 最初に完成形を見てみましょう。 See the Pen by junpei (@junpei-sugiyama) on CodePen. 極力余計なコードは書かないようにしましたが、多少cssで整えています。コード解説それではコードを見てみましょう。 <div class="container"> <div class="slider"> ...

Web制作スライダー

2021/8/15

slickのスライダーをスマホのみ無効にする方法

slickのスライダーをスマホのみ無効にする方法ない？今回はそんな疑問にお答えしていきます。スマホのみスライダーを無効にしたい場合もあると思います。スマホの判断は画面幅で決めていきます。スマホ時にはスライダー無効まずはスマホ時にスライダーを無効にしてみます。今回はこのブログをPCで見た時に確認が出来るように、画面幅500px以下になったらスライダーを無効にしてみたいと思います。 See the Pen by junpei (@junpei-sugiyama) on CodePen. 最初はスラ ...

Web制作スライダー

2021/8/27

slickのカスタマイズ用オプション一覧をご紹介

slickのオプションってどんなのがあるの？今回はそんな疑問にお答えします。スライダーを簡単に実装できるプラグインとして有名なslickですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。 slickの使い方とよく使うオプションについては以下の記事を参照下さい。レスポンシブ対応のスライダープラグイン「slick」の使い方今回は使用頻度が低い物まで一覧としてご紹介していこうと思います。 slickのオプション一覧早速ですが一覧を表示します。個人的に良く使う物は赤字で、特に良く使う物は ...

Web制作スライダー

2021/8/15

slickで指定したブレイクポイントでスライドの表示枚数を変える方法

slickでスライドの表示枚数をブレイクポイントで変更出来ない？今回はそんな疑問にお答えします。 PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。今回はslickのオプションを使ってブレイクポイントを指定し、スライドの表示枚数を変える方法について解説していきます。 PCは3枚、指定したブレイクポイントで1枚に変更まずは完成形を見てみます。 See the Pen slick（レスポンシブ） by junpei (@junpei-sugiyama) on ...

Web制作スライダー

2021/8/15

slickで左右に少しだけ見えているスライダーを作る方法

slickで左右に少しだけ前後のスライドが見えてるスライダーってどうやるの？中央に1枚表示されていて、左右に少し見えているスライダーは比較的良くあるタイプかと思います。今回はその方法について解説していきます。中央に1枚の場合まずは中央に1枚表示され、左右に少し見えているスライダーを見てみます。 See the Pen slick（左右に少しだけ見えているスライダー：1枚） by junpei (@junpei-sugiyama) on CodePen. CSSは1点だけ補足します。 .slider ...

Web制作スライダー

2021/9/11

slickのドットインジケーターをカスタマイズする方法

slickのドットインジケーターってカスタマイズ出来ない？今回はそんな疑問にお答えします。ドットインジケーターとはスライダーの下にあるドットの事で、スライドの枚数分あり、ドットをクリックするとそのスライドに移動します。このデザインを変える方法を解説していきます。 slickのドットインジケーターをカスタマイズする方法まずはデフォルトの状態を見てみましょう。 See the Pen slickドットインジケーター（デフォルト） by junpei (@junpei-sugiyama) on Code ...

1 2 Next »