數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2016年11月1日 星期二

bxSlider 快速使用:2016年版



可快速使用的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>




6 則留言:

  1. bxSlider 已經不支援 jQuery 3, 另外作者已經沒作更新一段時間

    回覆刪除
    回覆
    1. ………………?

      刪除
    2. 謝了。我了解。
      這是教學用的寫作練習,
      基本上所使用的jquery也是1.9.2版本,
      所以就教學上是可用的。
      如果您對jquery的版本不一定要追求最新的,
      基本上bxslider是相對好使用的套裝程式。

      刪除
    3. 你好老師我想請教一下 bxSlider 我使用div來調整大小 那如我想要條中間要要如何設定

      刪除
    4. 就調整DIV本身到居中就可以了。請參考
      http://lmcmultimedia.blogspot.tw/2015/05/div.html

      刪除
  2. 作者已經移除這則留言。

    回覆刪除