jcarousel and responsive layout

I have jcarousel and i manage to make him display 8 elements. Now i want when i resize the browser, even jcarousel resize, because otherwise jcarousel bar go out from the browser space. I try to do:

  $( window ).resize(function() {
        $("#Carousel").jcarouselLite({
                visible: 5                    
        });
  });

In the head. But it doesn't seems to work. if the browser became too small (e.g. viewed on a phone) it's better to make jcarousel disappear and view a list of item? with @media? Because even the image in the gallery is 100px 100px Always. I can provide an example if necessary.

tried now with something like this too: $(window).trigger('resize');

 $(window).resize(function(){
if($(window).width() > 300 && $(window).width() < 500){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 3.5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
else if($(window).width() > 500 && $(window).width() < 700){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 4.5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
else if($(window).width() > 700 && $(window).width() < 900){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
    else if($(window).width() > 1000){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 6,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
 });

It Works, but i have a problem because it shows me just the element i can see when i cycle. and not every element Another weird thing, since JcarouselLite code is left:0, it seems i can't add Arrow around jcarousel.

Answers


It seems like what you're trying to do can be solved by using the non-lite version jCarousel. I don't think it's easy to do with the lite version.

They provide a responsive example.


Need Your Help

Unknown whitespace appearing inside <div> without padding or margins

html css image rendering whitespace

I'm having an odd issue with whitespace in a design I'm building.

standard value of iPhone tableview row height

iphone uitableview height row standards

what is the standard value of iPhone tableview row height? every where I look it says it will be set to standard value what is this value in points?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.