「Cool Carousels」でつくる、画像をマウスオーバーした時にスライドさせてテキストを表示する

2014年12月2日jQueryプラグイン活用

jQueryプラグイン「Cool Carousels」を使って、画像をマウスオーバーした時にスライドしてくるアニメーションでテキストを表示する仕組みをつくることができます。

JavaScript

(function($){
	$(function() {
		$('#photo > figure').each(function() {
			var $cfs = $(this);
			$cfs.carouFredSel({
				direction: 'up',
				circular: false,
				infinite: false,
				auto: false,
				scroll: {
					easing: 'quadratic',
					queue: 'last'
				},
				items: {
					visible: 1,
					width: 237,
					height: 156
				}
			});
			$cfs.hover(
				function() {
					$cfs.trigger('next');
				},
				function() {
					$cfs.trigger('prev');
				}
			);
		});
	});
})(jQuery);

HTML

<div id="photo">
	<figure>
		<img src="img01.jpg" width="237" height="156" />
		<figcaption>photo01</figcaption>
	</figure>
	<figure>
		<img src="img02.jpg" width="237" height="156" />
		<figcaption>photo02</figcaption>
	</figure>
	<figure>
		<img src="img03.jpg" width="237" height="156" />
		<figcaption>photo03</figcaption>
	</figure>
</div>

CSS

.caroufredsel_wrapper {
	margin: 0 !important;
}
#photo {
	margin: 0 auto;
	width: 711px;
}
#photo figure {
	display: block;
	width: 237px;
	height: 156px;
	float: left;
}
#photo figure figcaption {
	display: block;
	background-color: #ffbc30;
	width: 237px;
	height: 156px;
	color: #ffffff;
	padding: 15px 20px;
	box-sizing: border-box;
}