Home Made Garbage

Slider Pro カスタマイズ:スライダーが2枚の時に対応

お母ちゃん お母ちゃん  2016.12.1 
ホーム
電子工作
Raspberry Pi
IOT
WEB

Slide Proで、スライダーが2枚の時に上手く動かなかったので、調整しました。

通常、2枚の時

ノーマルスライダー

一瞬消える

100%のスライダー

左側が空白になる

 

カスタマイズ Demo

ノーマルスライダー

スムーズにスライド

100%のスライダー

左側にも表示

コード

HTML

jQuery

2枚の時に複製して、4枚にします。

jquery.sliderPro.js

これだけだと、スライダーに対応したボタンも4つになってしまうので、jquery.sliderPro.jsも修正しました。

「dummyButtons」という変数で差し込んでいます。

150-151行目

4517-4551 行目

個人的メモ

サイト内で使う為のメモです。

HTML

表示デモ

caption 1

caption 2

Related Posts

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TOP