#67 訪問する度に1枚目の画像が切り替わるスライダー【ぴよぴよコーダーの開発日記】

2023年3月18日 14:42

使うプラグイン

jQuery.js
jQuery.cookie.js
slick.js

やりたいこと

Cookieに訪問回数を格納
⇒ リロードする度に、Cookieの値がカウントアップされていく
スライダーの画像の1枚目に、Cookieの値の名前のファイルを設定

実装方法

まずは、jQuery.jsとjQuery.cookie.jsを読み込む
jQuery.cookieのCDNは下記を参照
https://cdnjs.com/libraries/jquery-cookie

<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>

<script type="text/javascript" src="./jquery.cookie.min.js"></script>

ロードする度にCookieの値が増えていく実装は、アルファシスさんのページを参考　http://alphasis.info/2013/08/jquery-plugin-cookie-visitfrequency/

ちなみに、ロードが絡むCookieはサーバーにアップしないと、格納できないらしく、ローカルサーバー上ではできへんかった。

ちなみに、Cookieの簡単な説明はTAMさんのページがわかりやすかった。
参考　https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html
クッキーの設定　$.cookie("KEY", "VALUE", { expires: 7 });　//7は7日間保持
クッキーの取得　$.cookie("KEY");
yskさんのページもわかりやすい　https://ysklog.net/jquery/2144.html

次にslick.jsを読み込む
CSSとJSは右記を参照　https://kenwheeler.github.io/slick/

スライダーの設置方法は、AndHAさんのページを参考にしました。
https://and-ha.com/coding/slick/

全体的なソース

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./slick.css"/>
    <title>Document</title>
<style>
	.myslider img {
		width: 100%;
	}
	.slick-prev,.slick-next {
		position: absolute;
		top:50%;
		z-index: 1;
	}
	.slick-next {
		right: 0;
	}
</style>
</head>
<body>
	<div style="margin: 1em;">
		<p><span id="sampleCount">1</span>回目の訪問の画像。</p>
	</div>
<div id="js_slider" class="myslider">
	<div><img src="./img/i1.jpg" alt="tori" id="js_first_img"></div>
	<div><img src="./img/m91.jpg" alt="ki"></div>
	<div><img src="./img/m92.jpg" alt="kesiki"></div>
	<div><img src="./img/i2.jpg" alt="tori"></div>
	<div><img src="./img/m93.jpg" alt="ki"></div>
	<div><img src="./img/m94.jpg" alt="kesiki"></div>
	<div><img src="./img/i3.jpg" alt="tori"></div>
	<div><img src="./img/m95.jpg" alt="kesiki"></div>
	<div><img src="./img/m96.jpg" alt="kesiki"></div>
</div>
	
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<script type="text/javascript" src="./jquery.cookie.min.js"></script>
<script>
	$(function() {
		var $imgCount = jQuery.cookie( 'imgCount' );
		if( $imgCount != undefined ){
			if($imgCount < 3){
			  $imgCount++; 
			 } else {
				$imgCount = 1; 
			 }

		}else{
			$imgCount = 1;
		}
		$('#sampleCount').html( $imgCount );
		$('#js_first_img').attr('src', './img/i'+ $imgCount +'.jpg');
		jQuery.cookie( 'imgCount', $imgCount, { expires: 1 } );
	} );

    $(function () {
	  $('#js_slider').slick();
	});
</script>
</body>
</html>

デモ　デモは3回画像が切り替わったら、1枚目の画像を出すようにしました

ちなみに、ロードじゃなくてボタンでクリック回数でカウントさせたいときは、WEBDESIGNDAYさんのページが参考になりそう。
https://webdesignday.jp/inspiration/technique/jquery-js/3704/

この記事が気に入ったらサポートをしてみませんか？