2013/03/28
PC、スマホでスワイプで画像、コンテンツを送れるスライドショー
PCでもスマホでもまた、画像でもhtmlでもスワイプでコンテンツを送れる便利なプラグインswipeshow。
画像の例
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="slideshow swipeshow"> <ul class="slides"> <li class="slide"> <img src="1.jpg" alt="" /> </li> <li class="slide"> <img src="2.jpg" alt="" /> </li> <li class="slide"> <img src="3.jpg" alt="" /> </li> <li class="slide"> <img src="4.jpg" alt="" /> </li> </ul> <div class='dots'></div> </div> |
JS
|
1 2 | $(".version").text($.swipeshow.version); $(".slideshow").swipeshow({ mouse: true, interval: 6000 }); |
htmlの例
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="slideshow swipeshow nb"> <ul class="slides"> <li class="slide"> <div> 月日は百代の過客にして行かふ年も又旅人也。<br> 舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。<br> 古人も多く旅に死せるあり。<br> 予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、 </div> </li> <li class="slide"> <div> 弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。<br> むつまじきかぎりは宵よりつどひて舟に乗て送る。<br> 千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。 </div> </li> <li class="slide"> <div> 室の八嶋に詣す。同行曾良が曰、「此神は木の花さくや姫の神と申て富士一躰也。無戸室に入て焼給ふちかひのみ中に、火〃出見のみこと生れ給ひしより室の八嶋と申。又煙を讀習し侍もこの謂也」。将このしろといふ魚を禁ず。縁記の旨世に傳ふ事も侍し。 </div> </li> <li class="slide"> <div> 卅日、日光山の梺に泊る。あるじの云けるやう、「我名を佛五左衛門と云。萬正直を旨とする故に人かくは申侍まゝ、一夜の草の枕も打解て休み給へ」と云。いかなる仏の濁世塵土に示現して、かゝる桑門の乞食順礼ごときの人をたすけ給ふにやとあるじのなす事に心をとゞめてみるに、唯無智無分別にして正直偏固の者也。剛毅木訥の仁に近きたぐひ気禀の清質尤尊ぶべし。 </div> </li> </ul> <div class='dots'></div> </div> |
JS
|
1 2 | $(".version").text($.swipeshow.version); $(".slideshow").swipeshow({ mouse: true, interval: 6000 }); |
Author Profile
SHARE
