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">&lsaquo;</a>         <a href="#" class="jcarousel-control-next">&rsaquo;</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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -