2021.12.4|JavaScript(jQuery)
htmlタグをそのままスライドさせるスライダーjQuery「Carou FredSel」の設定方法
ホームページの画像を右から左にスライドショーをさせる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>
実装サンプル
実装サンプルを作りましたのでこちらでも確認してみてください。
Carou FredSel Plugin デモ
まとめ
以上で設定完了となりますが、簡単に設定ができますね。
画像や写真のスライダープラグインは沢山ありますが、htmlのスライダーがあると便利ですね。
スライダーの要素設定で色々カスタマイズできるので使い勝手は良いです。