まだまだ初心者なので、お手柔らかにお願いいたします。以下のように左と右のスライドを作ろうとしています。
質問は2つあります。
NEXTの処理は、うまくできたのですが、PREVの処理がうまくできていません。PREVを押すと、最初は1枚目が表示されていて、3枚目が出る、そこからPREVを押すと2枚目に、そして再び1枚目へ、という挙動にしたいです。
質問1)prevボタンの挙動はどこがおかしいでしょうか?
質問2)また、cssでoverflowをhiddenにしてしまうと、左右のボタンも消えてしまいます。どうすればoverflow-hiddenをしても、ボタンが消えないようにできるでしょうか?よろしくお願いいたします。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Slide</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="stage"> <div id="cards"> <i class="fa fa-chevron-circle-left" aria-hidden="true" id="prev"></i> <div id="check" class="card">1</div> <div id="retry" class="card">2</div> <div id="last" class="card">3</div> <i class="fa fa-chevron-circle-right" aria-hidden="true" id="next"></i> </div> </div> <script src="js/main.js"></script> </body> </html>
CSS
body { background: #ddd; font-size: 16px; font-family: Arial, sans-serif; } .stage { margin: 0 auto; width: 100px; height: 100px; border: 2px solid #bbb; /* overflow: hidden; */ } #cards { width: 500px; height: 100px; background: #cae6f4; transition: 0.8s; position: relative; } .card { width: 100px; height: 100px; background: #fff; float: left; } .card + .card { margin-left: 100px; } #cards.move { transform: translate(-200px, 0); } #cards.movefurther { transform: translate(-400px, 0); } #prev, #next { cursor: pointer; font-size: 42px; color: #bbb; position: absolute; top: 30px; } #prev { left: -60px; } #next { right: -60px; }
JS
(function() { 'use strict'; var cards = document.getElementById('cards'); var check = document.getElementById('check'); var retry = document.getElementById('retry'); var last = document.getElementById('last'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); next.addEventListener('click', () => { if(cards.classList.contains('move')){ cards.className = 'movefurther'; } else if(cards.classList.contains('movefurther')){ cards.className = ''; } else { cards.className = 'move'; } }); prev.addEventListener('click', () => { if(cards.classList.contains('move')){ cards.className = ''; } else if(cards.className = ''){ cards.className = 'movefurther'; } else { cards.className = 'move'; } }); })();
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/08 09:53
2019/04/08 10:39
2019/04/09 14:25