bxSliderで外部HTMLをスライド表示する

自分用メモ

bxSliderは画像以外にも任意の要素をスライド表示することができるが、外部HTMLを読み込むようなoptionはないようだ。

そこで、ajaxで読み込めるように...

<ul id="bx-pager">
  <li> <a data-slide-index="0" href="">東洋水産</a>
  <li> <a data-slide-index="1" href="">日清食品</a>
  <li> <a data-slide-index="2" href="">サンヨー食品</a>
  <li> <a data-slide-index="3" href="">明星食品</a>
</ul>

<div class="bxslider">
  <div class="slide">スライドさせたい内容【1】</div>
  <div class="slide" src="htm2.html"></div> <!--ここは外部HTML-->
  <div class="slide">スライドさせたい内容【3】</div>
  <div class="slide">スライドさせたい内容【4】</div>
</div>

<script>
$(document).ready(function() {
  $.ajaxSetup({cache:false});
  $('.slide').each(function(){
    var src = $(this).attr('src');
    if(src !=''){
      $(this).load(src);
    }
  });
});

$(document).ready(function(){
  $('.bxslider').bxSlider({
    pagerCustom: 'ul#bx-pager',
    controls: false,
  });
});
</script>

sample
http://qitailang.small.jp/misc/text_nav_slider_external_file_hanyo/