Q&A
既存のプラグイン利用や改修ではなくあくまで自作するということですよね。
jQueryで画像スライダーを作りました。その後、よく見かける丸ポチも加えたくなりました。
画像を一つ右にスライドするたびに、丸も動く仕様です。
for文やeach()でおそらく実装できると思ったのですが、うまくいくコードが考えつきませんでした。
この解決方法が分かる方、実装方法を教えてください。
スライダーのボタンと丸ポチはfont awesomeのアイコンです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/b0d6bffff7.js" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .container { width: 1500px; margin: 0 auto $space_5l; } .slider { width: 1500px; height: 700px; overflow: hidden; position: relative; } .slider-container { padding: 0; margin: 0; overflow: hidden; list-style: none; position: relative; } .slider-item { width: 1500px; height: 700px; background: #333; color: #fff; float: left; text-align: center; line-height: 700px; font-size: $font_l; } .slider-item1 { background: linear-gradient(red 0%, #ddd 100%); } .slider-item2 { background-image: linear-gradient(yellow 0%, #ddd 100%); } .slider-item3 { background-image: linear-gradient(orange 0%, #ddd 100%); } .slider-item4 { background-image: linear-gradient(green 0%, #ddd 100%); } .slider-item5 { background-image: linear-gradient(blue 0%, #ddd 100%); } .slider-nav { color: #333; position: absolute; top: 330px; font-size: 40px; cursor: pointer; z-index: 2; } .slider-prev { left: 20px; } .slider-next { right: 20px; } .slider-buttons { text-align: center; position: absolute; top: -40px; z-index: 3; position: relative; } .slider-button { margin-right: $space_l; font-size: 22px; } .button-on { color: #000; } .button-off { color: #ccc; } </style> </head> <body> <div class="container"> <div class="slider"> <i class="fas fa-angle-left slider-nav slider-prev js-slide-prev"></i> <i class="fas fa-angle-right slider-nav slider-next js-slide-next"></i> <ul class="slider-container"> <li class="slider-item slider-item1">IMG1</li> <li class="slider-item slider-item2">IMG2</li> <li class="slider-item slider-item3">IMG3</li> <li class="slider-item slider-item4">IMG4</li> <li class="slider-item slider-item5">IMG5</li> </ul> </div> <div class="slider-buttons"> <i class="fas fa-circle carousel-button button-on"></i> <i class="fas fa-circle carousel-button button-off"></i> <i class="fas fa-circle carousel-button button-off"></i> <i class="fas fa-circle carousel-button button-off"></i> <i class="fas fa-circle carousel-button button-off"></i> <i class="fas fa-circle carousel-button button-off"></i> </div> </div> <script> // 画像スライダー var currentItemNum = 1; var $sliderContainer = $('.slider-container'); var slideItemNum = $('.slider-item').length; var slideItemWidth = $('.slider-item').innerWidth(); var slideContainerWidth = slideItemNum * slideItemWidth; var DURATION = 300; var $sliderButton = $('.slider-button'); $sliderContainer.attr('style', 'width: ' + slideContainerWidth + 'px'); $('.js-slide-next').on('click', function() { if (currentItemNum < slideItemNum){ $sliderContainer.animate({left: '-=' + slideItemWidth + 'px'}, DURATION, 'swing'); $sliderButton.each(function(key, value){ console.log(key + ':' + $(value).number()); }); currentItemNum++; } }); $('.js-slide-prev').on('click', function() { if (currentItemNum > 1){ $sliderContainer.animate({left: '+=' + slideItemWidth + 'px'}, DURATION); currentItemNum--; } }); </script> </body> </html>
ただ、css内に見られる $～ という表現、これはなんの言語、フレームワークでしょうか
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
