前提・実現したいこと
画像スライダーを実現させたい。
発生している問題・エラーメッセージ
値を取得できず、スライダー機能が動きません。
該当のソースコード
javaScript
1var currentItemNum = 1; 2var $slideContainer = $('.slider__container'); 3var slideItemNum = $('.slider__item').length; 4var slideItemWidth = $('.slider__item').innerWidth(); 5var slideContainerWidth = slideItemWidth * slideItemNum; 6var DURATION = 500; 7 8$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px'); 9 10$('.js-slider-next').on('click', function (){ 11 if(currentItemNum < slideItemNum){ 12 $slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION); 13 currentItemNum++; 14 } 15}); 16 17$('.js-slider-prev').on('click', function (){ 18 if(currentItemNum > 1){ 19 $slideContainer.animate({left: '+='+slideItemWidth+'px'}, DURATION); 20 currentItemNum--; 21 } 22});
HTML
1<div class="main"> 2 <div class="slider"> 3 <i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true"></i> 4 <i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true"></i> 5 <ul class="slider__container"> 6 <li class="slider__item slider__item1">IMG1</li> 7 <li class="slider__item slider__item2">IMG2</li> 8 <li class="slider__item slider__item3">IMG3</li> 9 <li class="slider__item slider__item4">IMG4</li> 10 <li class="slider__item slider__item5">IMG5</li> 11 </ul> 12 </div> 13 </div> 14 <script src="https://code.jquery.com/jquery-3.4.1.js" 15 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 16 crossorigin="anonymous"></script> 17 <script src="app.js"></script>
css
1body { 2 background: #f6f5f4; 3 color: #333; 4} 5 6.main { 7 width: 980px; 8 margin: 30px auto; 9} 10 11.slider { 12 width: 980px; 13 height: 400px; 14 overflow: hidden; 15 position: relative; 16} 17 18.slider__container { 19 padding: 0; 20 overflow: hidden; 21 margin: 0; 22 list-style: none; 23 position: relative; 24} 25 26.slider__item { 27 width: 980px; 28 height: 400px; 29 background: #333; 30 color: #fff; 31 float: left; 32 text-align: center; 33 line-height: 400px; 34 font-size: 5em; 35} 36 37.slider__item2 { 38 background: #efb030; 39} 40 41.slider__item3 { 42 background: #ef5b33; 43} 44 45.slider__item4 { 46 background: #a737ef; 47} 48 49.slider__item5 { 50 background: #414eef; 51} 52 53.slider__nav { 54 color: #fff; 55 position: absolute; 56 top: 180px; 57 font-size: 40px !important; 58 cursor: pointer; 59 z-index: 2; 60} 61 62.slider__prev { 63 left: 20px; 64} 65 66.slider__next { 67 right: 20px; 68}
試したこと
$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');
ここまでは問題なく動いているようでした……
補足情報(FW/ツールのバージョンなど)
コンソールでは特にエラーは起きていませんでした。
コードはマークダウンのcode機能を利用してご提示ください。
文字化けではなくXSSなどの対策の一環だとは思いますが、ひとまずマークダウン利用すればインデント含めてそのままコードが表示されます。
どのような表示になるかはヘルプや他の質問、回答を確認してください。
また、ブラウザ開発ツールのコンソールにエラーが出ていないかご確認ください。
ありがとうございます!
コンソールでエラーは起きていませんでした!
あとできればCSSもご提示いただけたらと。
追加致しました!
あれ?動きますね。ちゃんとスライドしています。
確認されたブラウザは何でしょうか?
私の方はChrome最新(74.0)で動作しました。
私の場合は外部CSS、外部JSじゃなくHTMLに直接書き込んでますが、
それ以外は同じのはず。
もしapp.jsが読み込めていないならエラー出ているはずですし。
当方の環境では動きませんでした。@Chrome74.0.3729.169(Official Build) (64 ビット)
<i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true">A</i>
<i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true">B</i>
とかしてあげて、AとかBをクリックすると動きましたが。
Chromeでバージョン同じですね。
私の方はiタグに何も入れない現行ソースのままで動いています。
ちなみにIE11,Edgeでも動きました。
回答1件
あなたの回答
tips
プレビュー