可快速使用的content slider。
同時又可以依創作者的要求，快速地
來做出不同小大樣態的互動媒材。
來做出不同小大樣態的互動媒材。
教學影音
一、把下列程 式碼copy到<head>xxx</head>之間（課堂建議）或<body>之後：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
範例一：就直接使用。
HTML碼：
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
範例二：用div來設置大小
HTML碼：
<div style="border: 1px solid red; width: 320px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>
範例三：與表格的配合使用
 |
夏日的台北
天空和
許多有顏色的物件， 染著了莫名情緒為衣。 |
|
HTML碼： 如例二先設置div，和表格同寬
<div style="width: 182px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>
範例四：多張圖顯示
jQuery 以及 HTML碼
jquery碼
<script>
$(document).ready(function(){
$('.slider2').bxSlider({
slideWidth: 250,
minSlides: 2,
maxSlides: 2,
slideMargin: 10
});
});
</script>
HTML碼
<div class="slider2">
<div class="slide"><img src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg"></div>
<div class="slide"><img src="https://c7.staticflickr.com/9/8685/28629384750_97ab277e1a_b.jpg"></div>
</div>
bxSlider 已經不支援 jQuery 3, 另外作者已經沒作更新一段時間
回覆刪除………………？
刪除謝了。我了解。
刪除這是教學用的寫作練習，
基本上所使用的jquery也是1.9.2版本，
所以就教學上是可用的。
如果您對jquery的版本不一定要追求最新的，
基本上bxslider是相對好使用的套裝程式。
你好老師我想請教一下 bxSlider 我使用div來調整大小 那如我想要條中間要要如何設定
刪除就調整DIV本身到居中就可以了。請參考
刪除http://lmcmultimedia.blogspot.tw/2015/05/div.html
作者已經移除這則留言。
回覆刪除