Q&A
前提・実現したいこと
スライドショーをjQueryで実装したいです。
自力で実装してみたものの、 prevボタンとnextボタンのボタンが機能していません。
発生している問題・エラーメッセージ
slideArray で画像のwidthは取得していているものの、
slideArray、i、index が上手く連携できておらず、スライドショーが実装できていません・・・
そもそもスライドが実現できていませんが、「最後のスライドの場合ははじめに戻る」ようにコードも追加したいです。
該当のソースコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<div class="wrapper"> 14 <div class="slider-wrap"> 15 <div class="slider-area"> 16 <ul class="slider-list clearfix"> 17 <li><img src="img/1.jpg" alt=""></li> 18 <li><img src="img/2.jpg" alt=""></li> 19 <li><img src="img/3.jpg" alt=""></li> 20 <li><img src="img/4.jpg" alt=""></li> 21 </ul> 22 <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button> 23 <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button> 24 </div> 25 </div> 26</div> 27<script type="text/javascript" src="js/jquery.js"></script> 28<script type="text/javascript"> 29
CSS
1.slider-wrap { 2 width: 600px; 3 padding: 10px; 4 margin: 0 auto; 5 border-radius: 10px; 6 background-color: #DDD; 7 box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); 8} 9.slider-area { 10 position: relative; 11 width: 600px; 12 height: 300px; 13 background-color: #FFF; 14 overflow: hidden; 15} 16.slider-list { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 2400px; 21 height: 300px; 22} 23.slider-list > li { float: left; } 24.slider-ctrl-btn { 25 position: absolute; 26 top: 50%; 27 width: 30px; 28 height: 30px; 29 margin-top: -15px; 30 cursor: pointer; 31 border-radius: 15px; 32 background-color: rgba(255, 255, 255, 0.5); 33} 34.slider-ctrl-btn.prev { left: 30px; } 35.slider-ctrl-btn.next { right: 30px; }
jQuery
1"use strict" 2$(function() { 3 var $slider = $(".slider-list"), 4 slideArray = [], 5 slideWidth = $slider.find("li").width(), //リストの幅を取得 6 slideNum = $slider.find("li").length, //リストの配列の数を取得 7 index = 0; //今何番目か 8 9 10 for(var i = 0; i < slideNum; i++) { 11 //リストの数が4未満の時に繰り返す 12 //i = リストi番目 13 slideArray[i] = - i * slideWidth; 14 } 15 16 $(".slider-ctrl-btn").on("click", function() { 17 // console.log(slideWidth), 18 // console.log(slideNum), 19 // console.log(slideArray), 20 slide($(this).data("ctrl")); 21 }); 22 23 function slide(command) { 24 if (command === "prev") { 25 if (index > (slideNum - 1)) { 26 index = 0 27 } 28 } 29 if (command === "next") { 30 if (index < 0){ 31 index++; 32 } 33 } 34 $(".slider-list").animate({left: slideArray[index]},2000); 35 } 36 37 38});
ここにより詳細な情報を記載してください。
初学者で初歩的な質問ですみません！
具体的にどう書くと実現できるかが知れると大変助かります。
よろしくお願い致します。
回答1件
0
ベストアンサー
初期条件がindex = 0, slideNum = 4となっています。
この時、slide関数の条件文がどうなるかというと、
js
1 if (command === "prev") { 2 if (index > (slideNum - 1)) { // 0 > 4-1 なので条件不成立 3 index = 0 4 } 5 } 6 if (command === "next") { 7 if (index < 0){ // 0 < 0 なので条件不成立 8 index++; 9 } 10 }
となり、それぞれ条件が成立しないため、indexが変更されず、何も起きません。
ですので、解決方法は「条件式を見直すこと」でしょう。
また、command === "prev"の時に、どこかでindex--という処理も必要なのではないかな、と感じます。
「最後のスライドの場合ははじめに戻る」ようにコードも追加したい
以下のようにすればいいかと思います。
js
1 if (index > (slideNum - 1)) { 2 index = 0 3 }
投稿2021/04/05 07:05
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。