全画面で中央。左右が小さく動くと大きくなるスライダー

全画面で中央。左右が小さく動くと大きくなるスライダー

全画面でbxslaiderを使うことは多くあると思います。

今回は、「左右が小さく動くと大きくなってほしい」という要望がクライアントからあり、
bxslaiderをカスタマイズすることで要望をかなえることができたので、その方法を
お伝えできればと思います。

実際のデモ画面はこちら。
http://marcatcube.com/sample/bxslider/onecolumn_little/

この作り方ですが、
まずはHTMLでこういった形で作ります。

次に、JS部分を作成します。

この部分のクラスを実案件では好きなように変更してもらえれればいいかと思います。

あとはCSSでこのように記載してください。

そうすると完成します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です