[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME > ライブラリ > jQuery slider
jQuery slider
画像のスライドではなく要素のスライドなのでコンテンツのカスタマイズがやりやすい。 (imageの中には何も入れられないけどdivの中にはなんでも入れられる的な)
MIT Licenseでソースも小さくわかりやすいので、オプションでダメならソースをいじることもできそうな感じ。
使い方
jQuery本体とjquery.slider.min.js、jquery.slider.cssが必要となります。
HTML
- <link href="jquery.slider.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript" src="jquery.slider.min.js"></script>
サンプル
スライドさせたい要素の親要素に対してslider()を実行します。
実行結果
Javascript
- // .jquery-sliderの直接の子要素が
- // スライドの対象となる。
- $('.jquery-slider').slider();
- // このページの設定
- $('.jquery-slider').css({width: 640, height: 320})
- .find('h3').css({ padding: 40, fontSize: 40, color: '#FFFFFF' })
- .find('a.button').css({ background: '#FFFFFF' });
HTML
- <div class="jquery-slider">
- <div style="background-image: url(/storage/library/jquery_slider/img_1.jpg);">
- <h3>画像 1</h3>
- </div>
- <div style="background-image: url(/storage/library/jquery_slider/img_2.jpg);">
- <h3>画像 2</h3>
- </div>
- <div style="background-image: url(/storage/library/jquery_slider/img_3.jpg);">
- <h3>画像 3</h3>
- </div>
- <div style="background-image: url(/storage/library/jquery_slider/img_4.jpg);">
- <h3>画像 4</h3>
- </div>
- <div style="background-image: url(/storage/library/jquery_slider/img_5.jpg);">
- <h3>画像 5</h3>
- </div>
- </div>