<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>