bxSliderのよく使うカスタマイズ5種類

bxSliderでよく使っているカスタマイズについてまとめました。

ブログ記事はこちら

共通

以下のCSSは全サンプル共通に必要です。

CSS


	/* 共通(ローディングとナビゲーション) */
	.bxslider {
		position: relative;
	}
	.bxslider ul {
		opacity: 0;
	}

	.bxslider a {
		transition: 0.4s;
	}
	.bxslider .bx-pager {
		position: absolute;
		bottom: 26px;
		left: 0;
		width: 100%;
		height: 0px;
		text-align: center;
		display: inline;
	}
	.bxslider .bx-pager-item {
		display: inline;
		padding: 0 20px;
	}
	.bxslider .bx-pager-item a {
		background: rgba(0,0,0,1);
		display: inline-block;
		width: 16px;
		height: 16px;
		text-indent: -200%;
		overflow: hidden;
		border-radius: 50%;
	}
	.bxslider .bx-pager-item a:hover {
		background: rgba(0,0,0,0.6);
	}
	.bxslider .bx-pager-item a.active {
		background: rgba(160,160,160,1);
	}

	.bxslider .bx-controls-direction {
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -1em;
		width: 100%;
		height: 0px;
	}
	.bxslider .bx-controls-direction a {
		width: 40px;
		height: 40px;
		display: block;
		background: rgba(0,0,0,0.8);
		position: relative;
		text-indent: -100%;
		overflow: hidden;
	}
	.bxslider .bx-controls-direction a:hover {
		background: rgba(0,0,0,0.4);
	}
	.bxslider .bx-controls-direction a:before,
	.bxslider .bx-controls-direction a:after {
		content: '';
		position: absolute;
		top: 12px;
		left: 8px;
	}
	.bxslider .bx-controls-direction a:after {
		width: 16px;
		height: 16px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(45deg);
	}
	.bxslider .bx-controls-direction a.bx-prev:after {
		transform: rotate(-135deg);
		left: 16px;
	}
	.bxslider .bx-prev {
		float: left;
	}
	.bxslider .bx-next {
		float: right;
	}

	.bx-loading:before,
	.bx-loading:after,
	.bx-loading {
	  border-radius: 50%;
	  width: 1em;
	  height: 1em;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation: load7 1.8s infinite ease-in-out;
	  animation: load7 1.8s infinite ease-in-out;
	}
	.bx-loading {
	  color: #000;
	  font-size: 10px;
	  position: absolute;
	  top: 40%;
	  left: 50%;
	  text-indent: -100%;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.bx-loading:before {
	  left: -3.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.bx-loading:after {
	  left: 3.5em;
	}
	.bx-loading:before,
	.bx-loading:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	@-webkit-keyframes load7 {
	  0%,
	  80%,
	  100% {
	    box-shadow: 0 2.5em 0 -1.3em;
	  }
	  40% {
	    box-shadow: 0 2.5em 0 0;
	  }
	}
	@keyframes load7 {
	  0%,
	  80%,
	  100% {
	    box-shadow: 0 2.5em 0 -1.3em;
	  }
	  40% {
	    box-shadow: 0 2.5em 0 0;
	  }
	}
		

基本

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