N-takデザインブログ

WEBで培った作品や技術を公開しています。

スマホのスワイプにも対応!横からスライドする初心者javascriptスライドショ-

11月になりました。

11月の1回目は『javascript』です。

サンプルは私のポートフォリオになるので、まず動きを見てみましょう。

 

N-tak.comのjQuery/javascriptサンプル集

 

同じページに複数実装しています。

各自、時間を少しずつずれながらスライドし、最後まで行ったら先頭に返り

スライドはループしていきます。

ちなみに、スマートフォンのスワイプにも対応しています。

 

f:id:r4m0khksticiibypvp4k:20131101151110j:plain

 

今回はSteven Wanderskiさんのbxslider javascriptを参考に実装しました。

 

では、早速。

HTMLを書き込みます。

<div id="slider_As">

<div class="As">

<ul id="As_js" class="slider">

<li><img src="イメージの保管場所" alt="" width="200" height="170" title=""></li>

<li><img src="イメージの保管場所" alt="" width="200" height="170" title=""></li>

<li><img src="イメージの保管場所" alt="" width="200" height="170" title=""></li>

<li><img src="イメージの保管場所" alt="" width="200" height="170" title=""></li>

<li><img src="イメージの保管場所" alt="" width="200" height="170" title=""></li>

</ul>

<div class="As_pager">

<a data-slide-index="0" href=""><img src="ボタンの画像大きさは任意" /></a>

<a data-slide-index="1" href=""><img src="ボタンの画像大きさは任意" /></a>

<a data-slide-index="2" href=""><img src="ボタンの画像大きさは任意" /></a>

<a data-slide-index="3" href=""><img src="iボタンの画像大きさは任意" /></a>

</div><!-- /As_pager -->

</div>

</div>

 

今回は、使用するファイルの内容も濃いので、ファイルを添付します。

こちらからダウンロードしてください。

 N-tak.comから圧縮ファイルをダウンロードする

 

ダウンロードしたファイルを自サイトに設置し

<head>内に記述してください。

赤色はajaxなのでローカルにおく必要はありません。

 

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider_As.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/jquery.bxslider.js"></script>

<script type="text/javascript" src="js/jquery.bxslider_As.js"></script>

 

 

これで一通り動くと思います。あとは、CSSを調整して自分のコンテンツや画像に合わせてカスタマイズしていけばokです。

 

 

で、1つのページに複数スライドする側を作りたいときは

As.css

As.js

html(<div id="slider_As">で囲まれている部分)

この3つをコピーして、関連するすべてAsと記述されているところを

任意の文字に変えれば複数独立した動きで作ることができます。

 

まぁ高度な方法があるんでしょうけど、私はこれでやりました。

圧縮方法があれば教えてください。

 

いかんせん私も初心者なので。

 

以上、初心者用javascriptでした。