連動するカルーセルの実装をしてみました。
分けて使用することで、それぞれのカルーセルの位置・デザインを自由にカスタマイズすることが可能になりました！
【ファイル構成】
・imageフォルダ
・index.html
・style.css
・main.js
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>連動するカルーセル</title>
<link rel="stylesheet" href="style.css">
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--script-->
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div class="view">
<div class="kankouti">
<div class="kankouti-carousel">
<ul class="kankouti-carousel-area">
<li class="kankouti-carousel-list"><p class="kankoutiname-p">札幌</p></li>
<li class="kankouti-carousel-list"><p class="kankoutiname-p">富士山</p></li>
<li class="kankouti-carousel-list"><p class="kankoutiname-p">京都</p></li>
<li class="kankouti-carousel-list"><p class="kankoutiname-p">沖縄</p></li>
</ul>
</div>
</div>
<div class="image-carousel">
<ul class="image-carousel-area">
<li class="image-carousel-list"><img src="image/sapporo.jpg" alt="札幌" class="kankoutiimage"></li>
<li class="image-carousel-list"><img src="image/fuji.jpg" alt="富士山" class="kankoutiimage"></li>
<li class="image-carousel-list"><img src="image/kyoto.jpg" alt="京都" class="kankoutiimage"></li>
<li class="image-carousel-list"><img src="image/okinawa.jpg" alt="沖縄" class="kankoutiimage"></li>
</ul>
</div>
<div class="arow-wrap">
<div class="arrow-left">
<button class="arrow-btn js-btn-back" type="button"></button>
</div>
<div class="arrow-right">
<button class="arrow-btn js-btn-next" type="button"></button>
</div>
</div>
</div>
</body>
</html>【CSS】
/*全体の位置設定*/
body{
margin: 0;
}
.view{
position: relative;
width: 100%;
height: 100vh;
max-width: 1024px; /*最高横幅*/
min-height: 480px; /*最低縦幅*/
margin-right: auto;
margin-left: auto;
background-color: #ffffe0;
overflow: hidden;
}
/*観光地名のスライダー*/
.kankouti{
position:absolute;
top:80%;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: black;
font-size: 18px;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.kankouti-carousel{
position: relative;
width: 100vw;
height: calc(100px * 0.5625);
max-width: 1024px;
margin: 0 auto;
overflow: hidden;
scroll-snap-type: x mandatory;
}
.kankouti-carousel::-webkit-scrollbar{
display: none;
}
.kankouti-carousel-area{
position: absolute;
/*widthはjsで指定 list * スライド枚数*/
height: 100%;
display: flex;
padding-inline-start: 0px;
scroll-snap-type: x mandatory;
}
.kankouti-carousel-list{
width: 100vw;
height: calc(100px * 0.5625);
max-width: 1024px;
margin-right: 30px;
text-align: center;
list-style: none;
scroll-snap-align: start;
}
/*観光地画像のスライダー*/
.image-carousel{
position: absolute;
top:3%;
width: 100vw;
height: calc(800px * 0.8625);
max-width: 1024px;
margin: 0 auto;
overflow: hidden;
scroll-snap-type: x mandatory;
}
.image-carousel::-webkit-scrollbar{
display: none;
}
.image-carousel-area{
position: absolute;
/*widthはjsで指定 list*スライド枚数*/
height: 100%;
display: flex;
padding-inline-start: 0px;
scroll-snap-type: x mandatory;
}
.image-carousel-list{
width: 100vw;
height: calc(800px * 0.8625);
max-width: 1024px;
margin-right: 30px;
text-align: center;
list-style: none;
scroll-snap-align: start;
}
.image-carousel-list img{
width: 100vw;
max-width: 1000px;
height: auto;
}
/*スライド送りボタン*/
/* ボタンタグの装飾リセット */
button {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: none;
border-radius: 0;
}
.arow-wrap {
position: absolute;
top: 15%;
left: 0;
right: 0;
margin: auto;
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow-btn {
width: 40px;
height: 40px;
background-color:#1e90ff;
border-radius: 50%;
transition: .2s;
}
.arrow-btn:focus {
box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}
.arrow-btn:hover {
background-color: #1e90ff;
box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}
/* 左 */
.arrow-left {
position: relative
}
.arrow-left:before {
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #fefefe;
border-left: 2px solid #fefefe;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%) rotate(-45deg);
}
/* 右 */
.arrow-right {
position: relative;
}
.arrow-right:before {
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #fefefe;
border-left: 2px solid #fefefe;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-70%, -50%) rotate(135deg);
}【Javascript】
$(function () {
//image関連
let imageWidth = $('.image-carousel-list').outerWidth(true);
let imagelength = $('.image-carousel-list').length;
let imageslideArea = imageWidth * imagelength;
$('.image-carousel-area').css('imageWidth', imageslideArea);
let imageslideCurrent = 0;
let imagelastCurrent = imagelength - 1;
//観光地名(kankouti)関連
let kankoutiWidth = $('.kankouti-carousel-list').outerWidth(true);
let kankoutilength = $('.kankouti-carousel-list').length;
let kankoutislideArea = kankoutiWidth * kankoutilength;
$('.kankouti-carousel-area').css('kankoutiWidth',kankoutislideArea);
let kankoutislideCurrent = 0;
let kankoutilastCurrent = kankoutilength - 1;
//スライドの切り替わり関数
function changeslide() {
$('.image-carousel-area').stop().animate({
left: imageslideCurrent * -imageWidth
});
$('.kankouti-carousel-area').stop().animate({
left: kankoutislideCurrent * -kankoutiWidth
});
};
// NEXTボタン
$('.js-btn-next').click(function () {
if (imageslideCurrent === imagelastCurrent) {
console.log('最後');
imageslideCurrent = 0;
kankoutislideCurrent = 0;
changeslide();
} else {
imageslideCurrent++;
kankoutislideCurrent++;
changeslide();
};
});
// BACKボタン
$('.js-btn-back').click(function () {
if (imageslideCurrent === 0) {
imageslideCurrent = imagelastCurrent;
kankoutislideCurrent = kankoutilastCurrent;
changeslide();
} else {
imageslideCurrent--;
kankoutislideCurrent--;
changeslide();
};
});
})参考
下記サイトを参考にさせていただきました。ありがとうございます。