touch slider 自動滑塊TouchCarousel的使用
一、Bootsrape Carousel
這是 carousel 基本架構
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
看的是有看沒有懂，但是附上這張 carousel 結構圖就什麼都懂了
最後再附上一個 TouchCarousel 範例
<!DOCTYPE html> <!-- saved from url=(0049)http://ixisio.github.io/bootstrap-touch-carousel/ --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Twitter Bootstrap Touch Carousel</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" type="text/css" href="http://ixisio.github.io/bootstrap-touch-carousel/css/vendor/bootstrap.min.css"> <link rel="stylesheet" href="http://ixisio.github.io/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-12"> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class=""></li> <li data-target="#myCarousel" data-slide-to="1" class="active"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item"> <img src="http://designzum.com/wp-content/uploads/2014/03/mitopencourseware-e1394008878312.png" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt=" "> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="http://ixisio.github.io/bootstrap-touch-carousel/#" role="button">Sign up today</a></p> </div> </div> </div> <div class="item active"> <img src="http://designzum.com/wp-content/uploads/2014/03/mdn-e1394009292520.png" style="width:100%" data-src="holder.js/900x500/auto/#bf0000:#fff/text: " alt=" "> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="http://ixisio.github.io/bootstrap-touch-carousel/#" role="button">Learn more</a></p> </div> </div> </div> <div class="item"> <img src="http://designzum.com/wp-content/uploads/2014/03/codeplayer-e1394009555684.png" style="width:100%" data-src="holder.js/900x500/auto/#00a2bf:#fff/text: " alt=" "> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="http://ixisio.github.io/bootstrap-touch-carousel/#" role="button">Browse gallery</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="http://ixisio.github.io/bootstrap-touch-carousel/#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="http://ixisio.github.io/bootstrap-touch-carousel/#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel --> </div> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://ixisio.github.io/bootstrap-touch-carousel/js/vendor/bootstrap.min.js"></script> <script src="http://ixisio.github.io/bootstrap-touch-carousel/js/vendor/holder.js"></script> <script src="http://ixisio.github.io/bootstrap-touch-carousel/js/bootstrap-touch-carousel.js"></script> </body> </html>
目前 TouchCarousel 為開發階段，如果放圖進去手勢滑動的功能就會失效。
二、bxSlider
bxSlider 為另一個自動滑塊的套件，範例為
<!DOCTYPE html> <html> <head> <!-- jQuery library (served from Google) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> <style type="text/css"> .inner { width: 1000px; margin: 0 auto; } </style> </head> <body> <div class="inner"> <ul class="bxslider"> <li><img src="http://bxslider.com/images/home_slides/picto.png" /></li> <li><img src="http://bxslider.com/images/home_slides/hillside.jpg" /></li> <li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('.bxslider').bxSlider(); }); </script> </body> </html>
說明：
1、需安裝 jquery、bxSlider.js 與 bxSlider.css
<!-- jQuery library (served from Google) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
2、準備要做 slider 的部分
<ul class="bxslider"> <li><img src="http://bxslider.com/images/home_slides/picto.png" /></li> <li><img src="http://bxslider.com/images/home_slides/hillside.jpg" /></li> <li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li> </ul>
3、將該 slider 部分呼叫 bxSlider 方法建構起來
$(document).ready(function () { $('.bxslider').bxSlider(); });
4、此 bxSlider 可以解決手勢滑動功能失效的問題
5、由於使用 bxslider server 所提供給客戶端下載 js 與 css 的速率有點慢，
故建議使用 CDN 來加速下載，例如使用 jsdelivr
參考資料：