jquery - jCarousel controls not working, issue with JavaScript -
so i'm attempting create jcarousel can navigate between images, i'm having issue javascript controls navigating carousel, nothing happening when "next" navigation control clicked on carousel. on i'm going wrong appreciated. i've been using examples provided jcarousel i'm still not getting it. edit- css fine , working correctly
html
<link rel="stylesheet" href="./scripts/jquery-ui-themes-1.11.3/themes/base/jquery-ui.css"> <script src="./scripts/jquery-1.11.2.min.js"></script> <script src="./scripts/jquery-ui-1.11.3/jquery-ui.js"></script> <script type="text/javascript" src="../../libs/jquery/jquery.js"></script> <script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script> <div id ="content"> <div id="welcomemessage"> welcome! select quiz type menu above started! </div> <div id="slideshowquiz"> slideshow quiz <div id="jcarousel" class="jcarousel"> <ul> <li><p>question 1</p><img src="./images/niagrafalls.jpg" width="600" height="400" alt=""> </li> <li><img src="./images/brooklynbridge.jpg" width="600" height="400" alt=""> </li> </ul> </div> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> <p class="jcarousel-pagination"> </p> </div> </div> javascript
$(document).ready(function(){ }) function slideshowquizcontent() { $('#slideshowquiz').show(); $('#welcomemessage').hide(); slideshowquiz(); } function slideshowquiz() { (function($) { $(function() { $('.jcarousel').jcarousel(); $('.jcarousel-control-prev') .on('jcarouselcontrol:active', function() { $(this).removeclass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addclass('inactive'); }) .jcarouselcontrol({ target: '-=1' }); $('.jcarousel-control-next') .on('jcarouselcontrol:active', function() { $(this).removeclass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addclass('inactive'); }) .jcarouselcontrol({ target: '+=1' }); $('.jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addclass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeclass('active'); }) .jcarouselpagination(); }); })(jquery); }
Comments
Post a Comment