Stronghold

example1

<h1 class="ex1">example1</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>
<div id="slider1">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example2

<h1>example2</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider2').bxSlider({
    auto: true
    });
  });
</script>
<div id="slider2">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example3

<h1>example3</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider3').bxSlider({
    auto: true,
    pager: true
    });
  });
</script>
<div id="slider3">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example4

<h1>example4</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider4').bxSlider({
    auto: true,
    pager: true,
    easing: 'easeOutBounce'
    });
  });
</script>
<div id="slider4">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example5

<h1>example5</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider5').bxSlider({
    auto: true,
    pager: true,
    easing: 'easeOutBounce',
    speed: 1000
    });
  });
</script>
<div id="slider5">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example6

<h1>example6</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider6').bxSlider({
    auto: true,
    pager: true,
    easing: 'easeOutBounce',
    speed: 1000,
    randomStart: true,
    prevText: '前のスライダー',
    nextText: '次のスライダー'
    });
  });
</script>
<div id="slider6">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

example7

<h1>example7</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider7').bxSlider({
    auto: true,
    pager: true,
    easing: 'easeOutBounce',
    speed: 1000,
    randomStart: true,
    prevText: '前のスライダー',
    nextText: '次のスライダー',
    mode: 'vertical'
    });
  });
</script>
<div id="slider7">
  <div><img src="images/slide1.png" width="300px" height="95px"></div>
  <div><img src="images/slide2.png" width="300px" height="95px"></div>
  <div><img src="images/slide3.png" width="300px" height="95px"></div>
</div>

example8

<h1>example8</h1>
<script type="text/javascript">
$(function(){
  var slider = $('#slider8').bxSlider({
    controls: false,
  });
  $('.thumbs a').click(function(){
   var thumbIndex = $('.thumbs a').index(this);
    slider.goToSlide(thumbIndex);
    $('.thumbs a').removeClass('pager-active');
    $(this).addClass('pager-active');
    return false;
  });
  $('.thumbs a:first').addClass('pager-active');
});
</script>

<div id="slider8">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>

<div class="thumbs">
  <a href=""><img src="images/slide1.png" width="90px"/></a>
  <a href=""><img src="images/slide2.png" width="90px"/></a>
  <a href=""><img src="images/slide3.png" width="90px"/></a>
</div>

example9

<h1>example9</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider9').bxSlider({
    auto: true,
    pager: true,
    easing: 'easeOutBounce',
    speed: 1000,
    pause:  4000,
    prevText: '前のスライダー',
    nextText: '次のスライダー'
    });

    $('#ex9 .pager-link').wrapInner('<span></span>');

  });

</script>
<div id="slider9">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>
<style>
/*-- ex9 --*/
#ex9 span{display: none;}
#ex9 .bx-pager{width:100%; height:10px;}
#ex9 .pager-link{
  background: url(images/slide_pointer.png) left bottom;
  height:10px; width:10px;
  display: block;
  float: left;
  margin: 0 5px 0 0
}
#ex9 .pager-active{
  background: url(images/slide_pointer.png) left top;
}
</style>


example10

<h1>example10</h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider10').bxSlider({
    ticker: true,
    tickerSpeed: 2500
    });
  });
</script>
<div id="slider10">
  <div><img src="images/slide1.png" width="300px"></div>
  <div><img src="images/slide2.png" width="300px"></div>
  <div><img src="images/slide3.png" width="300px"></div>
</div>