javascript - my bootstrap carousel fdi-Carousel slide not sliding at all -
when in check error in console chrome uncaught referenceerror: $ not definedi see error code in code . might problem code welcome. code .this slider_flow.php .this link website 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> this 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%; } this 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)); }); }); this js scripts linked whole website.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 © <script> var currentdate = new date(), day = currentdate.getdate(), month = currentdate.getmonth() + 1, year = currentdate.getfullyear(); document.write(day + "/" + month + "/" + year) </script> 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 menu --> <script> $("label.menu").click(function(){ $(".top-menu ul").slidetoggle("slow" , function(){ }); }); </script> <!-- //script 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>
you need import jquery before can use it:
<script src="assets/js/jquery-1.11.1.min.js"></script> <!-- must before jquery use --> <script src="assets/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $().uitotop({ easingtype: 'easeoutquart' }); }); </script>
Comments
Post a Comment