同じ動きをする複数のスライダーを動かしたい (JavaSprict, CSS)
全く動かず、css(デザイン)自体に不満はないですが、動作がうまく反映しません。動いたとしても1つだけ動く、、までしか突き止められませんでした。JSに問題があるとは思うのですが、どなたかご指摘いただければと思います。
前提
Dream Weaverにて制作。
動作が完璧でない。
該当のソースコード
HTML
<article id="stay"> <div class="stay_slide"> <span id="prev" class="prev"></span> <span id="next" class="next"></span> <ul class="indicator"> <li id="list1"></li> <li id="list2"></li> <li id="list3"></li> ; </ul> <div id="slider" class="slider slider1"> <img class="content content1" src="img/room2.jpg" alt="寿司の写真"> <img class="content content2" src="img/room5.jpg" alt="肉の写真"> <img class="content content3" src="img/room1.jpg" alt="前菜の写真"> </div> </div> <article id="facility"> <div class="facility_slide"> <span id="prev" class="prev"></span> <span id="next" class="next"></span> <ul class="indicator"> <li id="list1"></li> <li id="list2"></li> <li id="list3"></li> </ul> <div id="slider" class="slider slider2"> <img class="content content1" src="img/fasility1.jpg" alt="寿司の写真"> <img class="content content2" src="img/fasility2.jpg" alt="肉の写真"> <img class="content content3" src="img/facility3.jpg" alt="前菜の写真"> </div> </div> <article id="meal"> <div class="meal_slide"> <span id="prev" class="prev"></span> <span id="next" class="next"></span> <ul class="indicator"> <li id="list1"></li> <li id="list2"></li> <li id="list3"></li> </ul> <div id="slider" class="slider slider3"> <img class="content content1" src="img/meal1.jpg" alt="寿司の写真"> <img class="content content2" src="img/meal2.jpg" alt="肉の写真"> <img class="content content3" src="img/meal3.jpg" alt="前菜の写真"> </div> </div>
CSS
.stay_slide,.facility_slide, .meal_slide{ width: 100%; } #stay .next, #facility .next,#meal .next{ width: 40px; height: 40px; position: absolute; right: 0; bottom: 130px; transition: all 0.3s; z-index: 10; cursor: pointer; } #stay .next::after , #facility .next::after ,#meal .next::after { content: ""; display: block; width: 15px; height: 15px; border-top: solid 3px #828282; border-right: solid 3px #828282; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 15px; top: 10px; } #stay .next:hover , #facility .next:hover ,#meal .next:hover { background-color: #fff; transition: all 0.3s; } #stay .prev, #facility .prev,#meal .prev{ width: 40px; height: 40px; position: absolute; left: 0; bottom: 130px; transition: all 0.3s; z-index: 10; cursor: pointer; } #stay .prev::after , #facility .prev::after ,#meal .prev::after { content: ""; display: block; width: 15px; height: 15px; border-top: solid 3px #828282; border-right: solid 3px #828282; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); position: absolute; left: 15px; top: 10px; } #stay .prev:hover , #facility .prev:hover,#meal .prev:hover { background-color: #fff; transition: all 0.3s; } #stay .slider , #facility .slider ,#meal .slider { width:100%; display: flex; margin: 0 auto; } #stay .slider1 , #facility .slide1r ,#meal .slider1 { transform: translateX(0); transition: all 0.3s; } #stay .slider2 , #facility .slider2 ,#meal .slider2 { transform: translateX(-100vw); transition: all 0.3s; } #stay .slider3 , #facility .slider3 ,#meal .slider3 { transform: translateX(-200vw); transition: all 0.3s; } #stay .content, #facility .content ,#meal .content { width: 100%; height:auto; display: flex; justify-content: center; align-items: center; } #stay .indicator #facility .indicator ,#meal .indicator { width: 100%; position: absolute; bottom: 10px; display: flex; z-index: 10; justify-content: center; align-items: center; } .stay_slide li,.facility_slide li, .meal_slide li { width: 16px; height: 16px; border-radius: 50%; position: relative; list-style: none; border: 1px #000 solid; margin-left: 10px; margin-right: 10px; cursor: pointer; } .stay_slide li:after,.facility_slide li:after, .meal_slide li:after { content: ""; width: 20px; height: 20px; border: 1px #000 solid; border-radius: 50%; position: absolute; top: -4px; left: -4px; z-index: 9; } #list1 { background-color: #000; }
JS
var slide = document.getElementById('slider'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var list1 = document.getElementById('list1'); var list2 = document.getElementById('list2'); var list3 = document.getElementById('list3'); // クリックイベント next.addEventListener('click', nextClick); prev.addEventListener('click', prevClick); function nextClick() { if (slide.classList.contains('slider1') === true) { slide.classList.remove('slider1'); slide.classList.add('slider2'); list1.style.backgroundColor = 'transparent'; list2.style.backgroundColor = '#000'; count = 0; } else if (slide.classList.contains('slider2') === true) { slide.classList.remove('slider2'); slide.classList.add('slider3'); list2.style.backgroundColor = 'transparent'; list3.style.backgroundColor = '#000'; count = 0; } else if (slide.classList.contains('slider3') === true) { slide.classList.remove('slider3'); slide.classList.add('slider4'); list3.style.backgroundColor = 'transparent'; list4.style.backgroundColor = '#000'; count = 0; } else { slide.classList.remove('slider4'); slide.classList.add('slider1'); list4.style.backgroundColor = 'transparent'; list1.style.backgroundColor = '#000'; count = 0; } }; function prevClick() { if (slide.classList.contains('slider1') === true) { slide.classList.remove('slider1'); slide.classList.add('slider4'); list1.style.backgroundColor = 'transparent'; list4.style.backgroundColor = '#000'; count = 0; } else if (slide.classList.contains('slider2') === true) { slide.classList.remove('slider2'); slide.classList.add('slider1'); list2.style.backgroundColor = 'transparent'; list1.style.backgroundColor = '#000'; count = 0; } else if (slide.classList.contains('slider3') === true) { slide.classList.remove('slider3'); slide.classList.add('slider2'); list3.style.backgroundColor = 'transparent'; list2.style.backgroundColor = '#000'; count = 0; } else { slide.classList.remove('slider4'); slide.classList.add('slider3'); list4.style.backgroundColor = 'transparent'; list3.style.backgroundColor = '#000'; count = 0; } }; // インジケーター list1.addEventListener('click', click1); list2.addEventListener('click', click2); list3.addEventListener('click', click3); list4.addEventListener('click', click4); function click1() { slide.classList.add('slider1'); slide.classList.remove('slider2'); slide.classList.remove('slider3'); slide.classList.remove('slider4'); list1.style.backgroundColor = '#000'; list2.style.backgroundColor = 'transparent'; list3.style.backgroundColor = 'transparent'; list4.style.backgroundColor = 'transparent'; count = 0; } function click2() { slide.classList.remove('slider1'); slide.classList.add('slider2'); slide.classList.remove('slider3'); slide.classList.remove('slider4'); list1.style.backgroundColor = 'transparent'; list2.style.backgroundColor = '#000'; list3.style.backgroundColor = 'transparent'; list4.style.backgroundColor = 'transparent'; count = 0; } function click3() { slide.classList.remove('slider1'); slide.classList.remove('slider2'); slide.classList.add('slider3'); slide.classList.remove('slider4'); list1.style.backgroundColor = 'transparent'; list2.style.backgroundColor = 'transparent'; list3.style.backgroundColor = '#000'; list4.style.backgroundColor = 'transparent'; count = 0; } function click4() { slide.classList.remove('slider1'); slide.classList.remove('slider2'); slide.classList.remove('slider3'); slide.classList.add('slider4'); list1.style.backgroundColor = 'transparent'; list2.style.backgroundColor = 'transparent'; list3.style.backgroundColor = 'transparent'; list4.style.backgroundColor = '#000'; count = 0; } // 自動スライド var count = 0; setInterval(() => { if (count > 4) { count = 0; nextClick(); } count++; console.log(count); }, 1000);

回答1件
あなたの回答
tips
プレビュー