carouFredSel を使ったスライダー

carouFredSelを使って以下のようなスライダーを作るには…

▼ふるさと納税(サンプル)
https://www.furusato-tax.jp/

▼carouFredSelで画面横幅いっぱいのスライダーや、レスポンシブスライダーを実装する
https://gimmicklog.com/jquery/106/

これをhead内で実装すると動かない
スライダーのhtmlの直前に実装すると動き出すが、他のJqueryと干渉してしまう。

以下のサイトを参考にしたらできた

▼carouFredSel[jquery]を使った前後のスライドをグレーアウトするスライドショー。
https://codingmania.net/jquery/727.html
▼デモ
https://codingmania.net/demo/Show/004/

コーディング

干渉しないように
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.0.min.js”></script>
<?php wp_head(); ?>  ←全体のJqueryはあとで読み込む ※逆になるとダメ

その後「jquery.carouFredSel-6.2.1-packed.js」を読み込む

その後「Jquery」を読み込む

<参考>

▼carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー
https://codingmania.net/slideshow/719.html

▼汎用性の高いカルーセルスクリプト「carouFredSel」
http://lver.hippy.jp/website/javascript/caroufredsel.php
http://lver.hippy.jp/contents/website/javascript/caroufredsel/

▼10WebDEMOからスライダー購入した
https://demo.10web.io/slider/

コーディングのサンプル

▼CodingMania search
https://codingmania.net/

サブコンテンツ

このページの先頭へ