jCarasole not working

Question

I am unable to make jQuery jcarousel i don't know why. Here is my HTML markup:

        <div id="carousel-hl-assistant" class="jcarousel"> 
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active hla-b1">
                    <div class="container">
                        <div class="col-sm-12 text-center"><h3>Hublife is cloud hosted to centralize data - allowing users to access and use their accounts anywhere,
                                anytime and on any device with the same <strong><em>simple-to-use</em></strong> and 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 to manage daily life needs with fast, convenient and money saving solutions in one 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 a uniquely secure customer profile system that filters and 
                                delivers real time relevant and timely content to assist with daily needs
                                without <strong>EVER</strong> identifying the 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 and Post everything</h3>
                        </div>
                    </div>  
                </div>
                <div class="item hla-b5">
                    <div class="container">
                        <div class="col-sm-12 text-center">
                            <h3>Hublife is universally dynamic, and 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 is completely <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 Up 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 is my JavaScript i am 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 is happening also the controls not working at all.

Answer 1

Okay I have sorted it - took a while!

You need to make sure your .items are not display:none otherwise the jquery won't work.

Also you need to set your jCarousel js like so:

            $('.jcarousel').jcarousel({
                list: ".carousel-inner",
                items: ".item"
            });

and move your jcarousel class to the top level div:

        <div id="carousel-hl-assistant" class="jcarousel"> 
            <!-- Wrapper for slides -->
            <div class="carousel-inner">

Then add the 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 a width here to make sure each .item is as large as the .jcarousel width so you get no overlapping.  Can't use 100% as .carousel-inner is 20000em (not sure why it's this wide)
}

Working example