私は、複数の画像のスライドショーを実装する中で、consoleでエラーが発生してしまい、動かない状態になっています。もしわかる方がいらしたら、教えていただきたいです。
javascripts
1document.addEventListener("turbolinks:load", function(){ 2 3 'use strict'; 4 5 var currentNum = 0; 6 var prev = document.getElementById('prev'); 7 var next = document.getElementById('next'); 8 var target = document.getElementById('target'); 9 10 prev.addEventListener('click', function() { 11 currentNum--; 12 if (currentNum < 0) { 13 currentNum = files.length - 1; 14 } 15 target.src = files[currentNum]; 16 }); 17 18 next.addEventListener('click', function() { 19 currentNum++; 20 if (currentNum > files.length - 1) { 21 currentNum = 0; 22 } 23 target.src = files[currentNum]; 24 }); 25 26}) 27 28
view
1<div class ="contents row"> 2 <div class="main"> 3 <i class="fas fa-chevron-circle-left" aria-hidden="true" id="prev"></i> 4 <img src="<%= @plan.image %>" id="target" style="width: 950px; 5 max-width: 100%; height: 400px; padding-bottom: 15px; padding-top: 20px; "> 6 <i class="fas fa-chevron-circle-right" aria-hidden="true" id="next"></i> 7 </div> 8 <div class="king"> 9 <ul class="example"> 10 <li class="current"><img src="<%= @plan.image %>" alt="写真1" style=" width: 154px; height: 123px;"></li> 11 <li><img src="<%= @plan.copy_image %>" alt="写真2" style="width: 154px; height: 123px;"></li> 12 <li><img src="<%= @plan.second_image %>" alt="写真3" style="width: 154px; height: 123px;"></li> 13 <li><img src="<%= @plan.third_image %>" alt="写真4" style="width: 154px; height: 123px;"></li> 14 <li><img src="<%= @plan.fourth_image %>" alt="写真5" style="width: 154px; height: 123px;"></li> 15 <li><img src="<%= @plan.five_image %>" alt="写真6" style="width: 154px; height: 123px;"> </li> 16 17 </ul> 18</div> 19 20<script src="javascripts/main.js"></script> 21<script> 22 var files = [ 23 '<%= @plan.image %>', 24 '<%= @plan.copy_image %>', 25 '<%= @plan.second_image %>', 26 '<%= @plan.third_image %>', 27 '<%= @plan.fourth_image %>', 28 '<%= @plan.five_image %>' 29 ]; 30</script>
あなたの回答
tips
プレビュー