WordPress

【WordPress】ウェブサイトに魅力的なスライダーを実装するプラグインSlider by 10Web

November 12, 2018
Slider by 10Web – Responsive Slider

Slider by 10Web – Responsive Slider
Slider by 10Web – Responsive Sliderはウェブサイトにスライダーを追加するのに役立つ多彩なプラグインです。レスポンシブ、様々なトランジションエフェクト、カスタムCSSをサポート、イメージウォーターマーキングの追加、ナビゲーションのカスタマイズなどの機能があります。

Slider by 10Webプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Slider by 10Webを検索
有効化にするとSliderが追加されます。

Slides

Slider by 10Web – Responsive Slider

Settings

Slider by 10Web – Responsive Slider
Global

Dimensions 寸法
Effect スライドをナビゲートするときに適用されるエフェクトを
Еffect duration エフェクトの持続時間
Hide on small screens 画面サイズがこの値より小さい場合はスライダーを非表示になります。
Full width on small screens 画面サイズがこの値よりも小さい場合、スライダーは全幅になります。
Smart Crop スマートクロップを使用する
Fixed background 固定背景
Slides order direction スライドの順序
Smart Load 最初の数枚の画像の読み込みを高速化
Right click protection スライダー画像を右クリックさせない
Published
Autoplay スライダーを自動再生
Time Interval スライドの時間間隔を設定
Enable loop ループを有効
Shuffle スライドをランダムな順序にする。
Two way slideshow 前のスライドに切り替えると、スライドショーは自動再生中に後ろに移動し始めます。
Stop on hover ホバーでストップする。自動再生がオンのときに機能します。
Start with slide 指定されたスライドから開始します。
Music 音楽/オーディオトラックを再生できます。
Slider alignment スライダーの配置を設定
Background color 背景色
Border 境界の幅、タイプ、色を設定
Border radius 半径。CSSのタイプ値を使用します。
Margin スライダーのマージンを設定
Shadow 影。CSSのタイプ値を使用してください

Slider by 10Web – Responsive Slider
Navigation

Next / Previous buttons 前と次のボタンが表示されます。
Mouse swipe navigation マウススワイプナビゲーション
Touch swipe navigation タッチスワイプナビゲーション
Mouse wheel navigation マウスホイール操作
Keyboard navigation キーボード操作
Show Navigation buttons ナビゲーションボタンを表示
Image for Next / Previous buttons デフォルトのナビゲーションボタンを使用するか、カスタムアイコンをアップロードするかを選択できます。
Next / Previous buttons style ナビゲーションボタンとして使用するボタンのスタイルを選択
Play / Pause button 再生と一時停止ボタンを表示する
Image for Play / Pause buttons デフォルトの再生ボタンと一時停止ボタンを使用するか、カスタムアイコンをアップロードすることができます。
Play / Pause buttons style 再生/一時停止ボタンのスタイル

Slider by 10Web – Responsive Slider
Bullets

Enable bullets ナビゲーションを有効にします。
Show bullets 常に表示する
Show thumbnail on bullet hover サムネイルを表示
Position 位置を選択
Bullets type タイプ
Bullet style スタイル

Slider by 10Web – Responsive Slider
Timer bar

Enable timer bar スライドが自動再生時に次のスライドに切り替わるまでの時間がタイマーバーで表示
Type スライダ内で使用するタイマーバーのタイプを選択

Slider by 10Web – Responsive Slider

Watermark

  1. Watermark type 透かしの種類を選択

OPTIONS

Slider by 10Web – Responsive Slider

  1. Enable WD Media Uploader WD Media Uploaderを有効にする
  2. Loading icon ローディングアイコン
  3. Uninstall Slider WD アンインストール

エディター

Slider by 10Web – Responsive Slider
エディターにAdd Sliderが追加されていますのでクリックします。
Slider by 10Web – Responsive Slider
スライダーを選択するとショートコードが挿入されます。

ウィジェット

Slider by 10Web – Responsive Slider
ウィジェットを有効にします。

Slider by 10Web – Responsive Slider
スライダーを選択します。
Slider by 10Web – Responsive Slider