共通
基本
HTML
<div class="example bxslider1">
<div class="bxslider">
<ul>
<li><img src="img1.jpg" alt="" /></li>
<li><img src="img2.jpg" alt="" /></li>
<li><img src="img3.jpg" alt="" /></li>
</ul>
</div>
</div>
CSS
/* Example1 */
.bxslider1 .bxslider {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.bxslider1 ul li img {
width: 100%;
height: auto;
}
JS
(function($){
$(window).on('load',function(){
//基本
var $slide = $('.bxslider1');
var $slide_ul = $slide.find('ul');
$slide_ul.bxSlider({
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(){
$slide_ul.animate({
opacity: 1
},500);
}
}
);
});
})(jQuery);
横幅いっぱい
HTML
<div class="example bxslider2">
<div class="bxslider">
<ul>
<li><img src="img1.jpg" alt="" /></li>
<li><img src="img2.jpg" alt="" /></li>
<li><img src="img3.jpg" alt="" /></li>
</ul>
</div>
</div>
CSS
/* Example2 */
.bxslider2 {
overflow: hidden;
}
.bxslider2 .bxslider {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.bxslider2 ul li img {
width: 100%;
height: auto;
}
.bxslider2 .bx-viewport {
overflow: visible !important;
}
JS
(function($){
$(window).on('load',function(){
//横幅いっぱい
var $slide2 = $('.bxslider2');
var $slide2_ul = $slide2.find('.bxslider > ul');
var n = $slide2_ul.children('li').size();
$slide2_ul.bxSlider({
maxSlides: 2,
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(){
$slide2.find('.bx-viewport > ul').css({
width: n * 100 + 415 + '%'
});
$slide2_ul.animate({
opacity: 1
},500);
}
}
);
});
})(jQuery);
横幅いっぱいで前後が半透明
HTML
<div class="example bxslider3">
<div class="bxslider">
<ul>
<li><img src="img1.jpg" alt="" /></li>
<li><img src="img2.jpg" alt="" /></li>
<li><img src="img3.jpg" alt="" /></li>
</ul>
</div>
</div>
CSS
/* Example3 */
.bxslider3 {
overflow: hidden;
}
.bxslider3 .bxslider {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.bxslider3 ul li img {
width: 100%;
height: auto;
}
.bxslider3 ul li {
opacity: 0.5;
}
.bxslider3 ul li.active {
opacity: 1;
}
.bxslider3 .bx-viewport {
overflow: visible !important;
}
JS
(function($){
$(window).on('load',function(){
//横幅いっぱい2
var $slide3 = $('.bxslider3');
var $slide3_ul = $slide3.find('.bxslider > ul');
$slide3_ul.children('li').each(function(i,elem){
$(this).attr('data-num',i);
});
var m = $slide3.find('.bxslider > ul > li').size();
$slide3_ul.bxSlider({
maxSlides: 2,
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(cr){
$slide3_ul.children('li[data-num="' + cr + '"]').addClass('active');
$slide3.find('.bx-viewport > ul').css({
width: m * 100 + 415 + '%'
});
$slide3_ul.animate({
opacity: 1
},500);
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
$slide3_ul.children('li').removeClass('active').animate({
opacity: 0.5
},300);
},
onSlideAfter: function($slideElement, oldIndex, newIndex){
$slide3.find('.bx-viewport > ul > li[data-num="' + newIndex + '"]').addClass('active').animate({
opacity: 1
},300);
}
}
);
});
})(jQuery);
オリジナルのキャプションをつける
HTML
<div class="example bxslider4">
<div class="bxslider">
<ul>
<li><img src="img1.jpg" alt="" />
<div class="bxslider_caption">
<div>
<h4>なんか画像のタイトル</h4>
<p>説明文とか入れる説明文とか入れる説明文とか入れる</p>
</div>
</div>
</li>
<li><img src="img2.jpg" alt="" />
<div class="bxslider_caption">
<div>
<h4>あああああああああ</h4>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</li>
<li><img src="img3.jpg" alt="" />
<div class="bxslider_caption">
<div>
<h4>いいいいいい</h4>
<p>テキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキスト<br />
<br />
テキストテキストテキストテキストテキスト</p>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
/* Example4 */
.bxslider4 .bxslider {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.bxslider4 ul li img {
width: 100%;
height: auto;
}
.bxslider4 .bxslider_caption {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
background: rgba(0,0,0,0.8);
color: #fff;
}
.bxslider4 .bxslider_caption > div {
padding: 10px;
}
.bxslider4 .bxslider_caption h4 {
font-size: 1.2em;
font-weight: bold;
}
JS
(function($){
$(window).on('load',function(){
//キャプション
var $slide4 = $('.bxslider4');
var $slide4_ul = $slide4.find('.bxslider > ul');
$slide4_ul.children('li').each(function(i,elem){
$(this).attr('data-num',i);
});
$slide4_ul.bxSlider({
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(cr){
$slide4_ul.animate({
opacity: 1
},500);
var $caption = $slide4.find('.bx-viewport > ul > li[data-num="' + cr + '"] .bxslider_caption');
var h = $caption.height();
$caption.css('height',0).animate({
height: h + 'px',
opacity: 1
},1000);
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
var $caption_current = $slide4.find('.bx-viewport > ul > li[data-num="' + oldIndex + '"] .bxslider_caption');
var $caption_new = $slide4.find('.bx-viewport > ul > li[data-num="' + newIndex + '"] .bxslider_caption');
var h = $caption_new.css('height','auto').height();
$caption_new.css('height',0).animate({
height: h + 'px',
opacity: 1
},1000);
$caption_current.animate({
height: 0,
opacity: 0
},1000);
}
}
);
});
})(jQuery);
GalleryViewみたいなやつ
HTML
<div class="example bxslider5">
<div class="bxslier5_photo">
</div>
<div class="bxslider">
<ul>
<li><img src="img1.jpg" alt="" data-photo="img1_l.jpg" /></li>
<li><a href="http://yahoo.co.jp"><img src="img2.jpg" alt="" data-photo="img2_l.jpg" /></a></li>
<li><img src="img3.jpg" alt="" data-photo="img3_l.jpg" /></li>
<li><a href="http://google.co.jp" target="_blank"><img src="img1.jpg" alt="" data-photo="img1_l.jpg" /></a></li>
<li><img src="img2.jpg" alt="" data-photo="img2_l.jpg" /></li>
<li><img src="img3.jpg" alt="" data-photo="img3_l.jpg" /></li>
</ul>
</div>
</div>
CSS
/* Example5 */
.bxslier5_photo,
.bxslider5 .bxslider {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.bxslider5 ul li {
opacity: 0.5;
cursor: pointer;
}
.bxslider5 ul li.active {
opacity: 1;
}
.bxslier5_photo img,
.bxslider5 ul li img {
width: 100%;
height: auto;
}
JS
(function($){
$(window).on('load',function(){
//GalleryViewみたいなやつ
var $slide5 = $('.bxslider5');
var $slide5_ul = $slide5.find('ul');
var $slide5_photo = $slide5.find('.bxslier5_photo');
$slide5_ul.children('li').each(function(i,elem){
$(this).attr('data-num',i);
var $img = $(this).find('img');
var $anc = $(this).children('a[href]');
if($anc.size()){
$img.attr('data-href',$anc.attr('href'));
if($anc.attr('target')){
$img.attr('data-target',$anc.attr('target'));
}
}
});
var wrapImg = function($img){
if($img.attr('data-href')){
$slide5_photo.find('img').wrap('<a href="' + $img.attr('data-href') + ' "></a>');
if($img.attr('data-target')){
$slide5_photo.find('a').attr('target',$img.attr('data-target'));
}
} else {
$slide5_photo.find('a img').unwrap();
}
}
var $img_first = $slide5_ul.find('li:first-child img');
var $img = $('<img />').attr('src',$img_first.attr('data-photo'));
wrapImg($img_first);
var slide5 = $slide5_ul.bxSlider({
easing: 'easeOutExpo',
speed: 500,
pager: false,
minSlides: 5,
maxSlides: 5,
moveSlides: 1,
slideWidth: 200,
onSliderLoad: function(cr){
$img.appendTo($slide5_photo);
var $photo_l = $slide5_photo.find('img');
$photo_l.fadeIn(500);
$slide5_ul.children('li[data-num="' + cr + '"]').addClass('active');
$slide5_ul.animate({
opacity: 1
},500);
},
onSlideBefore: function(){
$slide5_ul.children('li').removeClass('active').animate({
opacity: 0.5
},500);
$slide5_photo.find('img').animate({
opacity: 0
},250);
},
onSlideAfter: function($slideElement, oldIndex, newIndex){
var $current = $slide5.find('.bx-viewport > ul > li[data-num="' + newIndex + '"]:not(.bx-clone)');
var $photo_l = $slide5_photo.find('img');
console.log($current.find('img'));
$photo_l.attr('src',$current.find('img').attr('data-photo')).animate({
opacity: 1
},250).promise().done(function(){
wrapImg($current.find('img'));
});
$current.addClass('active').animate({
opacity: 1
},500);
}
});
$slide5_ul.find('li').on('click',function(){
slide5.goToSlide(parseInt($(this).attr('data-num')));
}).on('mouseenter',function(){
$(this).stop(true,true).animate({
opacity: 1
},500);
}).on('mouseleave',function(){
if(!$(this).is('.active')){
$(this).stop(true,true).animate({
opacity: 0.5
},500);
}
});
$slide5_ul.find('li a').on('click',function(e){
e.preventDefault();
});
});
})(jQuery);
以下のCSSは全サンプル共通に必要です。
CSS