jquery - jCarasole not working -
i unable make jquery jcarousel don't know why. here html markup:
<div id="carousel-hl-assistant" class="jcarousel"> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active hla-b1"> <div class="container"> <div class="col-sm-12 text-center"><h3>hublife cloud hosted centralize data - allowing users access , use accounts anywhere, anytime , on device same <strong><em>simple-to-use</em></strong> , intuitive user experience.</h3></div> <div class="col-sm-12 text-center"> <img src="images/img/hl-cloud.png" class="img-responsive"> </div> </div> </div> <div class="item hla-b2"> <div class="container"> <div class="col-sm-12 text-center"> <h3>everything manage daily life needs fast, convenient , money saving solutions in 1 central hub</h3> </div> <h4 class="col-sm-12 text-center"> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-cal.png" class="img-responsive"><span>calendar</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-lists.png" class="img-responsive"><span>lists</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-notes.png" class="img-responsive"><span>notes</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-contacts.png" class="img-responsive"><span>contacts</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-maps.png" class="img-responsive"><span>maps</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-e-comm.png" class="img-responsive"><span>shopping</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-media.png" class="img-responsive"><span>media</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-coupons.png" class="img-responsive"><span>coupons</span></div> </h4> </div> </div> <div class="item hla-b3"> <div class="container"> <div class="col-sm-4"> <img src="images/img/hl-4w.png" class="img-responsive"> </div> <div class="col-sm-8 text-center"> <h3>hublife utilizes uniquely secure customer profile system filters , delivers real time relevant , timely content assist daily needs without <strong>ever</strong> identifying individual user. </h3> <h3 class="col-sm-12"> <div class="col-xs-4"><img src="images/img/hl-no-cookies.png" class="img-responsive"></div> <div class="col-xs-4"><img src="images/img/hl-no-spam.png" class="img-responsive"></div> <div class="col-xs-4"><img src="images/img/hl-no-email-track.png" class="img-responsive"></div> </h3> </div> </div> </div> <div class="item hla-b4"> <div class="container"> <div> <h3 class="text-center"><img src="images/img/hl-3s.png" class="img-responsive" style="vertical-align:middle; display:inline-block"> save, share , post everything</h3> </div> </div> </div> <div class="item hla-b5"> <div class="container"> <div class="col-sm-12 text-center"> <h3>hublife universally dynamic, , comes in <strong>5</strong> languages</h3> </div> <h4 class="col-sm-12 text-center"> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-en.png" class="img-responsive"><span>english</span></div> <div class="col-sm-2 col-xs-6 text-center"><img src="images/img/hl-fr.png" class="img-responsive"><span>french</span></div> <div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-ge.png" class="img-responsive"><span>german</span></div> <div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-sp.png" class="img-responsive"><span>spanish</span></div> <div class="col-sm-2 col-xs-4 text-center"><img src="images/img/hl-it.png" class="img-responsive"><span>italian</span></div> </h4> </div> </div> <div class="item hla-b6"> <div class="container"> <div class="col-sm-12 text-center"> <h3>btw, hublife <strong><em>free</em></strong>, nada, nothing</h3> </div> <div class="col-sm-12 text-center"> <a href="#" class="btn btn-lg btn-success">sign now</a> </div> </div> </div> </div> <!-- controls --> <a class="left carousel-control jcarousel-control-prev" href="#" > <span class="fa fa-arrow-circle-left fa-2x"></span> </a> <a class="right carousel-control jcarousel-control-next" href="#" > <span class="fa fa-arrow-circle-right fa-2x"></span> </a> </div> here javascript using
(function($) { $(function() { $('.jcarousel').jcarousel({items: ".item"}); $('.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' }); }); })(jquery); nothing happening controls not working @ all.
okay have sorted - took while!
you need make sure .items not display:none otherwise jquery won't work.
also need set jcarousel js so:
$('.jcarousel').jcarousel({ list: ".carousel-inner", items: ".item" }); and move jcarousel class top level div:
<div id="carousel-hl-assistant" class="jcarousel"> <!-- wrapper slides --> <div class="carousel-inner"> then add following styles:
.jcarousel { position: relative; overflow: hidden; width: 100%; height:285px; } .carousel-inner { width: 20000em; position: relative; height:285px; } .jcarousel .item { float: left; //you should add width here make sure each .item large .jcarousel width no overlapping. can't use 100% .carousel-inner 20000em (not sure why it's wide) }
Comments
Post a Comment