CSSとJavascriptで1つのページ内に複数のページとページャーを作る
~ページャー、ページネーション又はページ送り
実際の例
この中は任意のコンテンツを入れてください
1ページ目
ここに任意のコンテンツを入れる

この中は任意のコンテンツを入れてください
2ページ目
ここに任意のコンテンツを入れる

この中は任意のコンテンツを入れてください
3ページ目
ここに任意のコンテンツを入れる

ソースコード
<div class="mamPager"> <div> この中は任意のコンテンツを入れてください <h4>1ページ目</h4> <p>ここに任意のコンテンツを入れる</p> <img src="./imgs/car3.jpg" style="width:200px;" /> </div> <div> この中は任意のコンテンツを入れてください <h4>2ページ目</h4> <p>ここに任意のコンテンツを入れる</p> <img src="./imgs/car2.jpg" style="width:200px;" /> </div> <div> この中は任意のコンテンツを入れてください <h4>3ページ目</h4> <p>ここに任意のコンテンツを入れる</p> <img src="./imgs/car1.jpg" style="width:200px;" /> </div> </div> <style> .mamPager{ box-sizing:border-box; width: 94%; font-size:16px; margin:0; padding:0; outline: 1px dashed lightgray; } .mamPager>div:nth-child(1), .mamPager>div:nth-child(3){ box-sizing:border-box; display:flex; flex-wrap:nowrap; justify-content:center; width:100%; margin:0; padding:0.4em; } .mamPager>div:nth-child(1)>a.mampagerfl, .mamPager>div:nth-child(3)>a.mampagerfl{ display:block; text-align:center; text-decoration:none; color:#333; background:none; margin:0.1em 0.1em 0.1em 0.1em; padding:0em 0.2em 0em 0.2em; border:solid 1px #CCC; } .mamPager>div:nth-child(1)>a.mampagerfl.no_anc, .mamPager>div:nth-child(3)>a.mampagerfl.no_anc{ color:#DDD; } .mamPager>div:nth-child(1)>a.mampagernum, .mamPager>div:nth-child(3)>a.mampagernum{ display:block; text-align:center; text-decoration:none; color:#333; background:none; margin:0.1em 0.1em 0.1em 0.1em; padding:0em 0.2em 0em 0.2em; border:solid 1px #CCC; } .mamPager>div:nth-child(1)>a.mampagernum.no_anc, .mamPager>div:nth-child(3)>a.mampagernum.no_anc{ color:#EEE; background:#333; } .mamPager>div:nth-child(2){ display: flex; overflow: hidden; width: 100%; flex-flow: row nowrap; scroll-snap-type:x mandatory; box-sizing:border-box; margin:0; padding:0; } .mamPager>div:nth-child(2)>div{ box-sizing:border-box; scroll-snap-align:start; flex:0 0 100%; margin:0; padding:0.5em; } </style> <script> var mamPager=[]; function mamPagerInit(){ let p=document.querySelectorAll(".mamPager"); for(i=0;i<p.length;i++){ mamPager[i]=[]; mamPager[i]["now"]=0; mamPager[i]["page"]=p[i]; mamPager[i]["pages"]=[]; for(j=mamPager[i]["page"].children.length-1;j>=0;j--){ mamPager[i]["pages"][j]=mamPager[i]["page"].children[j].cloneNode(true); mamPager[i]["page"].removeChild(mamPager[i]["page"].children[j]); } mamPager[i]["num"]=mamPager[i]["pages"].length; mamPager[i]["ope1"]=document.createElement("div"); mamPager[i]["page"].appendChild(mamPager[i]["ope1"]); mamPager[i]["inc"]=document.createElement("div"); mamPager[i]["page"].appendChild(mamPager[i]["inc"]); mamPager[i]["ope2"]=document.createElement("div"); mamPager[i]["page"].appendChild(mamPager[i]["ope2"]); let pager="<a href='javascript:void(0)' class='mampagerfl' onclick='mamPagerChange("+i+",-9)'><</a>"; for(j=0;j<mamPager[i]["num"];j++){ mamPager[i]["inc"].appendChild(mamPager[i]["pages"][j]); pager+="<a href='javascript:void(0)' class='mampagernum' onclick='mamPagerChange("+i+","+j+")'>"+(j+1)+"</a>"; } pager+="<a href='javascript:void(0)' class='mampagerfl' onclick='mamPagerChange("+i+",-8)'>></a>"; mamPager[i]["ope1"].innerHTML=pager; mamPager[i]["ope2"].innerHTML=pager; mamPagerChange(i,mamPager[i]["now"]); } } function mamPagerChange(i,j){ if(j==-9){j=mamPager[i]["now"]-1;} if(j==-8){j=mamPager[i]["now"]+1;} if(j<0){j=0;} if(j>=mamPager[i]["num"]){j=mamPager[i]["num"]-1;} mamPager[i]["now"]=j; for(k=0;k<mamPager[i]["ope1"].children.length;k++){ if(mamPager[i]["ope1"].children[k].classList.contains('no_anc')){ mamPager[i]["ope1"].children[k].classList.remove('no_anc'); } if(mamPager[i]["ope2"].children[k].classList.contains('no_anc')){ mamPager[i]["ope2"].children[k].classList.remove('no_anc'); } if(k==0 && mamPager[i]["now"]==0){ mamPager[i]["ope1"].children[k].classList.add('no_anc'); mamPager[i]["ope2"].children[k].classList.add('no_anc'); } if(k==(mamPager[i]["ope1"].children.length-1) && mamPager[i]["now"]==(mamPager[i]["num"]-1)){ mamPager[i]["ope1"].children[k].classList.add('no_anc'); mamPager[i]["ope2"].children[k].classList.add('no_anc'); } if(k>0 && (k-1)==mamPager[i]["now"]){ mamPager[i]["ope1"].children[k].classList.add('no_anc'); mamPager[i]["ope2"].children[k].classList.add('no_anc'); } } mamPager[i]["pages"][j].scrollIntoView({behavior:'smooth', block:'nearest', inline:'nearest'}); } window.addEventListener("DOMContentLoaded",function(){ mamPagerInit(); }); </script>