私のブートストラップカルーセルfdi-カルーセルスライドがまったく滑っていない

Question

クロム用コンソールのエラーをチェックするときUncaught ReferenceError: $ is not defined私はこのコードを自分のコードで見ます。 私のコードに何か問題があるかもしれません。何か助けてください。これは私のコードはslider_flow.php .thisを.thisは、ウェブサイトへのリンクlink

<div class="container"> 
     <div class="row"> 
      <div class="span12"> 
       <div class="well"> 
        <div id="myCarousel" class="carousel fdi-Carousel slide"> 
        <!-- Carousel items --> 
         <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0"> 
          <div class="carousel-inner onebyone-carosel"> 
           <div class="item active"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">1</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">2</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">3</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">4</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">5</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">6</div> 
            </div> 
           </div> 
           <div class="item"> 
            <div class="col-md-3"> 
             <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
             <div class="text-center">7</div> 
            </div> 
           </div> 
          </div> 
          <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a> 
          <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a> 
         </div> 
         <!--/carousel-inner--> 
        </div><!--/myCarousel--> 
       </div><!--/well--> 
      </div> 
     </div> 
    </div> 

この私のslider_flow.css

.carousel-inner.onebyone-carosel { margin: auto; width: 90%; } 
    .onebyone-carosel .active.left { left: -25.00%; } 
    .onebyone-carosel .active.right { left: 25.00%; } 
    .onebyone-carosel .next { left: 25.00%; } 
    .onebyone-carosel .prev { left: -25.00%; } 

この私のslider_flow.js

$(document).ready(function() { 

    $('.fdi-Carousel .item').each(function() { 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     var next2 = next.next(); 
     if (!next2.length) { 
      next2 = $(this).siblings(':first'); 
     } 
     next2.children(':first-child').clone().appendTo($(this)); 

     var next3 = next2.next(); 
     if(!next3.length){ 
      next3 = $(this).siblings(':first'); 
     } 
     next3.children(':first-child').clone().appendTo($(this)); 
    }); 
}); 

これですすべてのjsスクリプトはウェブサイト全体にリンクされています.footer.php

<div class="footer-section"> 
       <div class="container"> 
        <div class="footer-top"> 
           <div class="social-icons"> 
             <a href="https://www.facebook.com/WandaSokoLtd/"><i class="icon1"></i></a> 
             <a href="https://twitter.com/WandaSokoLtd"><i class="icon2"></i></a> 
             <!--a href="#"><i class="icon3"></i></a--> 
            </div> 
           </div> 

        <div class="footer-bottom"> 
         <p> Copyright &copy; 
          <script> 
           var currentDate = new Date(), 
            day = currentDate.getDate(), 
            month = currentDate.getMonth() + 1, 
            year = currentDate.getFullYear(); 
           document.write(day + "/" + month + "/" + year) 
          </script> 
          All rights Reserved | by<a href="http://www.wandasoko.org/" target="target_blank">WandaSoko</a> 
         </p> 
        </div> 
      <a class="scroll" href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a> 

       </div> 
      </div> 
        <!-- jQuery --> 
     <!-- Bootstrap Core JavaScript --> 
     <script src="assets/js/jquery-1.11.1.min.js"></script> 
     <script src="assets/js/responsiveslides.min.js"></script> 
        <script type="text/javascript"> 
         $(document).ready(function() { 

          $().UItoTop({ easingType: 'easeOutQuart' }); 

         }); 
        </script> 
     <!-- script for menu -->     
     <script> 
      $("label.menu").click(function(){ 
      $(".top-menu ul").slideToggle("slow" , function(){ 
      }); 
      }); 
     </script> 
     <!-- //script for menu --> 

     <!-- other useful jquery --> 
     <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
     <script> 
       $(function() { 
        $("#slider").responsiveSlides({ 
        auto: true, 
        nav: true, 
        speed: 500, 
        namespace: "callbacks", 
        pager: true, 
        }); 
       }); 
     </script> 

         <!-- start-smoth-scrolling--> 
     <script type="text/javascript" src="assets/js/move-top.js"></script> 
     <script type="text/javascript" src="assets/js/easing.js"></script> 
      <script type="text/javascript"> 
       jQuery(document).ready(function($) { 
        $(".scroll").click(function(event){  
         event.preventDefault(); 
         $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); 
        }); 
       }); 
      </script> 
     <script src="assets/js/slider_flow.js"></script> 
     <!--End-smoth-scrolling--> 

      <script src="assets/js/jquery.swipebox.min.js"></script> 
       <script type="text/javascript"> 
        jQuery(function($) { 
         $(".swipebox").swipebox(); 
        }); 
       </script> 
       <script type="text/javascript"> 
         $(document).ready(function() { 
         $('#myCarousel').carousel({ 
         interval: 10000 
          }) 
         }); 
       </script> 

    </body> 
</html> 

Answer 1

あなたは、あなたがそれを使用する前にjQueryをインポートする必要があります。

<script src="assets/js/jquery-1.11.1.min.js"></script> <!-- This must be before any jQuery use --> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $().UItoTop({ easingType: 'easeOutQuart' }); 

     }); 
    </script>