BlogシェアTweetこんにちは、みっきょんです。日々研修頑張っています!今回は研修中に学んだとを研修日記として書きたいと思います。最近、はじめて作るスライドショーに挑戦しました!画像を一定のスピードで無限にスライドさせるスライドショーです。こちらの記事を参考にし、作ってみました。id="loopslider"><ul><li>表示させたい画像</li><li>表示させたい画像</li><li>表示させたい画像</li></ul></div>このようにループさせたい画像をliの中に置きます。上記だと3枚の画像をループさせられるようになります。数を変更したい場合は「<li>表示させたい画像</li>」を増減させると変更します。id名を変更したい場合は緑の場所を任意のidに変更してください。hidden;}上記使用するCSSです。liで画像一枚の幅と高さを設定します。ul').clone().appendTo('#loopslider_wrap');});});上記のスクリプトをslide.jsのファイルとしてHTMLに読み込ませました。これで横にループするスライドショーの完成!が、それだけではありませんでした。上の画像の散らばった●部分1つ1つにリンクを設置し矢印の方へスライドというものでした。id="loopslider"><ul><li><a>●画像</a><a>●画像</a><a>●画像</a><a>●画像</a><a>●画像</a></li></ul></div>という形にし、●部分の画像1つ1つをポジションを決め、配置していきました。これで、スライド画像のデザインを崩さずループさせることが出来ました。1つの<li>に入れることで出来上がるとは...今回、篠田さんの知恵をお借りしました。ありがとうございます。同じスライダーを使用していても、発想を変えると、また違った動きをするものが出来るということを学びました。DATAPROTOP。