htmlタグをそのままスライドさせるスライダーjQuery「Carou FredSel」の設定方法

2021.12.4｜JavaScript（jQuery）

ホームページの画像を右から左にスライドショーをさせるjQueryライブラリは沢山ありますが、htmlタグを右から左にスライドさせるjQueryライブラリはあまり見かけませんが、jQueryライブラリを使うことによって、htmlもスライドができます。

スクロールしたタイミングで画像をフェードインさせるには、JavaScriptで設定することによって実装できます。

htmlタグをそのままスライドさせるスライダー「Carou FredSel」の設定方法を紹介します。

htmlタグをそのままスライドさせるスライダーさせる設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jqueryライブラリダウンロード
 Carou FredSel Pluginダウンロード

2.html、css、JavaScriptファイルを作成

html、css、JavaScriptファイルを作成します。

htmlファイルに記述

<div id="service">
<div class="slide">
<ul>
<li>
<h3>タイトルなど<br>記入してみると良いですね。</h3>
<div class="slideinner">
<p class="content_text">
サービスや商品の名前など詳細を記入してみると良いですね。
<a href="http://www.kingsite.jp/sample/010/" target="_blank" rel="nofollow"><img class="スライダー画像" src="/sample/010/img/photo01.jpg" alt="スライダー画像"></a>
</p>
</div>
</li>
<li>
<h3>タイトルなど<br>記入してみると良いですね。</h3>
<div class="slideinner">
<p class="content_text">
サービスや商品の名前など詳細を記入してみると良いですね。
<a href="http://www.kingsite.jp/sample/010/" target="_blank" rel="nofollow"><img class="スライダー画像" src="/sample/010/img/photo01.jpg" alt="スライダー画像"></a>
</p>
</div>
</li>
</ul>
</div>

<ul class="paging">
<li id="prev"><a href="#"><img src="/sample/010/img/arrow_01.png" alt="" /></a></li>
<li id="next"><a href="#"><img src="/sample/010/img/arrow_02.png" alt="" /></a></li>
</ul>

</div>

cssファイルに記述

/* スライド ---------------------------- */

#service {
	position: relative;
	padding: 0 0 10px;
}
#service .slide {
	font-size:13px;
	margin: 20px 40px 20px 40px;
	width: 800px;
	overflow: hidden;
}
#service .slide ul {
}
#service .slide li {
	float: left;
	width: 190px;
	margin: 0 10px 0 0;
	background: #e5e5e5;
}
#service .slide li h3{
	padding:10px 10px 0 10px;
}
.slideinner {
	float: left;
	margin:9px;
	background: #FFF;
}
.slideinner img {
	float: left;
	margin:9px 0 9px 0;
	border: solid 1px #ccc;
}

#prev {
	position: absolute;
	top: 200px;
	left: -60px;
}
#next {
	position: absolute;
	top: 200px;
	left: 842px;
}

JavaScriptファイルに記述

/* スクロール 
-----------------------------*/
$(function(){
	$("#service .slide ul").carouFredSel({
		items : 4,
		auto 	: 4000,
		prev: '#prev',
		next: '#next'
	});
});
$(function(){
  $("#service h3").tile();
  $("#service .text").tile();
});

3.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述

<meta charset="UTF-8">
<title>画面スクロールで表示されたタイミングで画像を横から現れる「jquery inview」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="jQueryを使ったHTMLを動かすスライダー jQuery「carouFredSel」のご紹介を致します。">
<meta name="keywords" content="HTMLを動かす,スライダー,画像,jquery.carouFredSel.js,スライド">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/010/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/sample/010/jquery.carouFredSel-5.6.2-packed.js"></script>
<script type="text/javascript" src="/sample/010/config.js"></script>