jCarousel Lite – A jQuery plugin August 9th, 2007

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Did I mention that it weighs just 2 KB?

As if that wasn’t enough, the best part is yet to come… You don’t need any special css file or class name to get this to work. Include the js file. Supply the HTML markup. Then, construct the carousel with just a simple function call.

Visit the project page for more information. There you can find a lot of demos and exhaustive documentation. This blog entry is just a teaser for further exploration.

Installing and getting it to work is as trivial as following the 3 steps given below…

Step 1:

Include a reference to the jQuery library and the jCarouselLite plugin. If you like interesting effects, include the Easing plugin as well (Optional). If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>

Step 2:

In your HTML file, provide the markup required by the carousel (a “div” enclosing an “ul”). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

Step 3:

Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

If you have any comments/suggestions/requests, feel free to drop in a comment or you can find me lurking around the jquery mailing list.

Update

Based on popular request, jCarouselLite has been updated to support jquery 1.2.x versions. Goto the download page and download version 1.0.1 to enjoy jquery 1.2.x support. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.

1,383 Responses to “jCarousel Lite – A jQuery plugin”

« 118 19 20 21 22 23 24 25 26 27 28 Show All

  1. 1351. muniek on May 22nd, 2012 at 4:51 pm

    hi

    i have small problem with vertical and horizontal images

    my frame size is 650px where i got 2 pictures of width 325px, but then when some pictures are 650px you can see only half of it and second picture from half of screen.

    you can check it here: http://ukmmagency.com/profile/elliot-dent/

    thanx for any help.

  2. 1352. Charles on May 22nd, 2012 at 6:00 pm

    Hi,

    I think there is a small bug with the non-circular carousels. I found that clicking on the next button when at the end caused a jump to top of page. My fix (in 1.0.1) change this line in the go(to) function:

    FROM: if(toitemLength-v) return;

    TO: if(toitemLength-v) return false;

    hth, Charles.

  3. 1353. john on May 24th, 2012 at 12:50 am

    Hello Ganeshji,

    Not sure if you are still active here, but if so, please let me know if the following option is available.

    With auto-scroll on and 6 images in rotation, when it reaches image 4 and I click on the button to display image 1, it (quickly) also displays images 3 and 2 before getting to 1. Is there a way to just have it show image 1 immediately and NOT scroll back over images 3 and 2?

    Thanks.
    John

  4. 1354. Craig on June 5th, 2012 at 6:49 pm

    Hello, thanks for this great little plugin.

    I’ve run into a snag on this page http://dccwsuat.ivypath.com/2012. I am using AnyStrech (https://github.com/danmillar/jquery-anystretch) to add backgrounds to the slides of my carousel. The issue is that whenever the Carosuel circles around (in this, since there’s only 2 slides from slide 2 ‘forward’ to slide 1), the background disappears. Do you have any idea why this would happen? It’s fine going around backwards.

    Thanks,
    Craig

  5. 1355. Armen on June 7th, 2012 at 2:33 pm

    Thank you for a great plugin! I enjoy using it on my sites.

    The only problem I had was the interval for auto scroll, which was not reset when user clicks on next/prev button, or the button with slide number. In some cases it resulted in changing to the next slide in a second or even immediately after user changed the slide, even if the auto parameter was set to 10sec. However I solved this problem by slightly modifying the code. Below is the improved version. I moved the setInterval() to a separate function, called clearInterval() every time the function is called, and added the new function to btnPrev, btnNext, and btnGo. I hope this will be useful for someone else too.

    (function($) { // Compliant with jquery.noConflict()
    $.fn.jCarouselLite = function(o) {
    o = $.extend({
    btnPrev: null,
    btnNext: null,
    btnGo: null,
    mouseWheel: false,
    auto: null,

    speed: 200,
    easing: null,

    vertical: false,
    circular: true,
    visible: 3,
    start: 0,
    scroll: 1,

    beforeStart: null,
    afterEnd: null
    }, o || {});

    return this.each(function() { // Returns the element collection. Chainable.

    var running = false, animCss=o.vertical?”top”:”left”, sizeCss=o.vertical?”height”:”width”;
    var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;
    var interval = null;

    if(o.circular) {
    ul.prepend(tLi.slice(tl-v-1+1).clone())
    .append(tLi.slice(0,v).clone());
    o.start += v;
    }

    var li = $(“li”, ul), itemLength = li.size(), curr = o.start;
    div.css(“visibility”, “visible”);

    li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
    ul.css({margin: “0″, padding: “0″, position: “relative”, “list-style-type”: “none”, “z-index”: “1″});
    div.css({overflow: “hidden”, position: “relative”, “z-index”: “2″, left: “0px”});

    var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
    var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
    var divSize = liSize * v; // size of entire div(total length for just the visible items)

    li.css({width: li.width(), height: li.height()});
    ul.css(sizeCss, ulSize+”px”).css(animCss, -(curr*liSize));

    div.css(sizeCss, divSize+”px”); // Width of the DIV. length of visible images

    if(o.btnPrev)
    $(o.btnPrev).click(function() {
    startInterval();
    return go(curr-o.scroll);
    });

    if(o.btnNext)
    $(o.btnNext).click(function() {
    startInterval();
    return go(curr+o.scroll);
    });

    if(o.btnGo)
    $.each(o.btnGo, function(i, val) {
    $(val).click(function() {
    startInterval();
    return go(o.circular ? o.visible+i : i);
    });
    });

    if(o.mouseWheel && div.mousewheel)
    div.mousewheel(function(e, d) {
    return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
    });

    startInterval();

    function startInterval() {
    if(o.auto) {
    if(interval != null)
    clearInterval(interval);
    interval = setInterval(function() {
    go(curr+o.scroll);
    }, o.auto+o.speed);
    }
    }

    function vis() {
    return li.slice(curr).slice(0,v);
    };

    function go(to) {
    if(!running) {

    if(o.beforeStart)
    o.beforeStart.call(this, vis());

    if(o.circular) { // If circular we are in first or last, then goto the other end
    if(to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
    curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
    } else if(to>=itemLength-v+1) { // If last, then goto first
    ul.css(animCss, -( (v) * liSize ) + “px” );
    // If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
    curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
    } else curr = to;
    } else { // If non-circular and to points to first or last, we just return.
    if(toitemLength-v) return;
    else curr = to;
    } // If neither overrides it, the curr will still be “to” and we can proceed.

    running = true;

    ul.animate(
    animCss == “left” ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
    function() {
    if(o.afterEnd)
    o.afterEnd.call(this, vis());
    running = false;
    }
    );
    // Disable buttons when the carousel reaches the last/first, and enable when not
    if(!o.circular) {
    $(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”);
    $( (curr-o.scroll itemLength-v && o.btnNext)
    ||
    []
    ).addClass(“disabled”);
    }

    }
    return false;
    };
    });
    };

    function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
    };
    function width(el) {
    return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’);
    };
    function height(el) {
    return el[0].offsetHeight + css(el, ‘marginTop’) + css(el, ‘marginBottom’);
    };

    })(jQuery);

  6. 1356. web on June 11th, 2012 at 10:55 pm

    Hi, great script… is there any way it can work with variable image width… even when the width of the image is entered in the img tag, the li container doesn’t change width…

  7. 1357. Matt on June 12th, 2012 at 5:01 pm

    Seems like there’s a defect when circular = true. I have a carousel with visible: 4, scroll: 4, and 105 elements. When you scroll to the end of the carousel, you see the following sets: {101, 102, 103, 104}, {105, 1, 2, 3}, {5, 6, 7, 8}.

  8. 1358. Alston on June 21st, 2012 at 7:11 am

    This edit of mine takes care of
    1. Auto-scroll interval issue
    2. Highlighting current external button
    3. Fade transition between each

    //Jquery Carousel Lite modified
    (function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev: null,btnNext: null,btnGo: null,mouseWheel: false,auto: null,speed: 200,easing: null,vertical: false,circular: true,visible: 3,start: 0,scroll: 1,beforeStart: null,afterEnd: null},o||{});return this.each(function(){var running=false,animCss=o.vertical?”top”:”left”,sizeCss=o.vertical?”height”:”width”;var div=$(this),ul=$(“ul”,div),tLi=$(“li”,ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}var li=$(“li”,ul),itemLength=li.size(),curr=o.start;div.css(“visibility”,”visible”);li.css({overflow: “hidden”,float: o.vertical?”none” : “left”});ul.css({margin: “0″,padding: “0″,position: “relative”,”list-style-type”: “none”,”z-index”: “1″});div.css({overflow: “hidden”,position: “relative”,”z-index”: “2″,left: “0px”});var liSize=o.vertical?height(li): width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width: li.width(),height: li.height()});ul.css(sizeCss,ulSize+”px”).css(animCss,-(curr*liSize));div.css(sizeCss,divSize+”px”);if(o.btnPrev)$(o.btnPrev).click(function(){resetAuto();return go(curr-o.scroll);});if(o.btnNext)$(o.btnNext).click(function(){resetAuto();return go(curr+o.scroll);});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){resetAuto();return go(o.circular?o.visible+i : i);});});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll): go(curr+o.scroll);});if(o.auto){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);function resetAuto(){clearInterval(autoScroll);autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);};div.hover(function(){clearInterval(autoScroll);},function(){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);});}function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to=itemLength-v+1){ul.css(animCss,-((v)*liSize)+”px”);curr=to==itemLength-v+1?v+1 : v+o.scroll;}else curr=to;}else{if(toitemLength-v)return;else curr=to;}running=true;ul.animate(animCss==”left”?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false;});if(!o.circular){$(o.btnPrev+”,”+o.btnNext).removeClass(“disabled”);$((curr-o.scrollitemLength-v&&o.btnNext)||[]).addClass(“disabled”);}}return false;};});};function css(el,prop){return parseInt($.css(el[0],prop))||0;};function width(el){return el[0].offsetWidth+css(el,’marginLeft’)+css(el,’marginRight’);};function height(el){return el[0].offsetHeight+css(el,’marginTop’)+css(el,’marginBottom’);};})(jQuery);

    //Jquery Initialization code
    $(function() {
    //Home Page Carousel
    $(“#bannerimgs”).jCarouselLite({
    circular: true,
    scroll: 1,
    visible: 1,
    auto: 2000,
    beforeStart: function(a) {
    $(a).parent().fadeTo(500, 0);
    var bg = $(a).find(‘img’).attr(‘src’);
    $(“#bannerimgs”).css({
    backgroundImage: “url(“+bg+”)”
    }, 100);
    },
    afterEnd: function(a) {
    $(a).parent().fadeTo(500, 1);
    var img_id = $(a).find(‘img’).attr(‘alt’);
    imgid = img_id.replace(“img”,”");
    $(‘.homebtnon’).each(function() {
    $(this).addClass(‘homebtnoff’).removeClass(‘homebtnon’);
    });

    switch (imgid) {
    case ’1′: $(‘.btn1′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    case ’2′: $(‘.btn2′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    case ’3′: $(‘.btn3′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    case ’4′: $(‘.btn4′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    case ’5′: $(‘.btn5′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    case ’6′: $(‘.btn6′).addClass(‘homebtnon’).removeClass(‘homebtnoff’);
    break;
    }
    //alert(imgid);
    },
    btnNext: “#bannernext”,
    btnPrev: “#bannerprev”,
    btnGo:
    ["#bannerbtns .btn1", "#bannerbtns .btn2",
    "#bannerbtns .btn3", "#bannerbtns .btn4",
    "#bannerbtns .btn5", "#bannerbtns .btn6"]
    });
    });

    //HTML Code





  9. 1359. slabounty on June 21st, 2012 at 8:59 pm

    It looks like there’s an issue if the number of images in the carousel is less than the number set by visible. For example if I have:

    visible: 5

    and only put 2 images in, then it appears that the carousel is broken. It will only show one image in the carousel. Is there a way around this or any kind of fix?

  10. 1360. Alexandre Vazzolla on June 22nd, 2012 at 4:28 am

    Incompatibility problem with other jQuery;
    Tried to implant a floating menu ;
    It causes the gallery to halt ;

  11. 1361. Ivan on July 1st, 2012 at 9:04 am

    Ganesh, if you’ll ever read this message, FYI seems that Google blacklisted this site: please do something!
    Thanks

  12. 1362. Nk on July 6th, 2012 at 4:03 pm

    The plugin scroll behavior is not consistent in Chrome. I am testing the demo listed at the beginning of this page. The images scroll left to right when clicked on next but after few images, they start scrolling right to left. The animation (left-to-right vs right-to-left) seems to be the culprit here since the images expected by clicking “next” are actually correct.

    One other issue – After clicking “next” to scroll few images, the animation is abruptly skipped causing the images to scroll at super fast rate.

    This works fine in FF and IE.

    Any known fixes or any ideas on how to fix this?

  13. 1363. Jeremy on July 11th, 2012 at 4:44 am

    Hi, how can I add item dynamically or during runtime?

  14. 1364. Carsten on July 11th, 2012 at 11:23 am

    Hi there!

    Does anyone have experience using the carousel as alternative content to Flash (using swf object)? At least in Firefox the outer div is set to width=0 if inside the object tag. It works fine with other browsers though…

    Regards

    Carsten

  15. 1365. Tom on July 12th, 2012 at 6:15 pm

    This is such a great light-weight plugin, I love it! But it made me confuse when I need to resize the images or li items inside the existed carousel.

    So I came up with this line of code after debugging around…

    liSize = o.vertical ? height(li) : width(li); // Update full li size(incl margin)-Used for animation

    I put it inside the go(to) function, so each time the slide rolls, it gets the new size of the items and goes into the right place.

    Sorry for my bad English!
    Thanks again for such a great script!

  16. 1366. Mac on July 30th, 2012 at 8:47 am

    hi Ganesh
    i m using jcarousellite_1.0.1c4 with dataList to show some data from database. its working fine in all other browser
    however in IE8 its not working properly
    i thing there is prob of html list tag margin.
    while scrolling list element slightly shift to right and continue scrolling vertically and at the end of cycle it again start from 0px position then again shift in between and so on.
    Please suggest some solution to this

  17. 1367. junxi on August 19th, 2012 at 7:51 am

    Can I use images of different sizes in this plugin?
    I tried,but it’s not perfect.
    So can you give me some suggestions?

  18. 1368. she-codes on August 20th, 2012 at 8:37 am

    Ganesh, there is an issue when I use the slider with html content. I don’t know if it is designed to be used only with images, but for the most part it works ok with html content.

    The issue is when there are and tags in this html content – they get added some styles too and it breaks the layout. Would it be possible to restrict your plugin to add width and positioning styles only on top level ul and li tags – the containers?

  19. 1369. Marco on August 20th, 2012 at 3:39 pm

    Hi

    First of all compliment for jcarousolite, I use this in many project and always work fine.

    I have create a plugin using your jquery plugin jcarousolite, but when I open a modal window (image) and after close it, then the scroll become crazy and go back and forth without stop.

    All request made with ajax create this issue.

    Do you have a suggestion what can be issue?

    thanks

  20. 1370. monica sharma on September 4th, 2012 at 8:38 am

    hi Ganesh,
    I want to know, is there any license to use your slider in commercial website.

  21. 1371. Sweta Chotalia on September 11th, 2012 at 2:32 pm

    Hi,

    I have bind repeater to jcarousel slider. But first item of repeater is displayed twice, else its working properly. I am using below code for jcarousel :-

    $(function() {
    $(“.slider2″).jCarouselLite({
    btnNext: “.next”,
    btnPrev: “.prev”,
    auto: 1000, // done by vaibhav
    speed: 1000, // done by vaibhav
    visible: 5,
    pauseOnMouseOver: true,

    });

    });

    Thanks in advance

  22. 1372. Linenore on September 17th, 2012 at 11:45 am

    Anybody have any information, how can I do the same for my Magento E-commerce portal ….www.linenore.com

  23. 1373. Richard Bland on September 26th, 2012 at 3:58 pm

    Hi Ganesh,

    I am having a problem in IE8 and below:

    The carousel is only showing one image in a line despite setting it to display 5 in a row. The carousel itself works but shows one image at a time.

    You can see it here: http://www.arnott-conveyors.co.uk/mk5-vertical-conveyor.html

    Firefox, Safari, and Chrome are all fine.

  24. 1374. Richard Bland on September 26th, 2012 at 3:58 pm

    Hi Ganesh,

    I am having a problem in IE8 and below:

    The carousel is only showing one image in a line despite setting it to display 5 in a row. The carousel itself works but shows one image at a time.

    You can see it here: http://www.arnott-conveyors.co.uk/mk5-vertical-conveyor.html

    Firefox, Safari, and Chrome are all fine.

    If anyone knows a workaround I would be grateful.

    Thank you :-)

  25. 1375. Alexandre Muranaka on September 26th, 2012 at 9:38 pm

    Hello,

    I had a problem using the scroll and view options with circular false

    my case: I have 22 lines in the carousel and the setting options are:

    scroll:8
    view:8
    circular:false

    The carousel doesn’t show the last 6 lines.

    And about the issue: display:none in the “knownIssues” section
    I used a callback function to turn on the carousel that was previous display:none in CSS

    I do not know if this is the best solution, maybe we could solve with another function using bind() and unbind() or live() and die() from jquery.

    What do you think about it ?

    Ps: Carousel Lite is very great tool, my sincere congrats, at my work we are using as a standard when we need one. =]

  26. 1376. Husain on September 28th, 2012 at 2:51 am

    i can use only five images in the carousal if i add images to carosal div the navigation of images location changes when the images increase from 5

  27. 1377. DJ on October 1st, 2012 at 2:12 pm

    Great script. Had a question about customization… We use the jcarousel lite script to show an image gallery (where readers can easily cycle through a top 10 list of images), however, all of our images are different heights. This causes a problem if there is content below the jcarousel lite. If one image is 100px tall … and the next 9 images are 600px tall … then there will be 500px of space beneath the 100px image (The carousel is always as tall as the tallest element).

    Is there a way to reduce the height of the viewable area to the height of the CURRENT image?

  28. 1378. alan on October 1st, 2012 at 4:02 pm

    Ganesh, thank you for this,

    I am trying to include so html inside the slide that includes a list, the in this sub-list gets hijacked as a slide too, is there anyway to work around this?

  29. 1379. Nilesh.K on October 8th, 2012 at 10:52 am

    Hi,
    First of all, I would like to thank you very much for the great plugin. I have used it in many of the sites and found it very easy and effective.
    But this time I am stuck into some issue that I am unable to resolve. I want to show the vertical gallery of images in which three images will be visible at a time and it will show first and third image partly and the second image as it is (Last 25% of first image, 100% of second and 25% of third image vertically). You can visit the website http://empirical2test.prospectportal.com/ and click on ‘Gallery’ to get an idea of how the plugin should work (the code is not live yet but you can get a little idea of how I want to operate on a plugin). The circular option has been set for showing the images in a loop. I am done with all the integration work but could not resolve an issue with image not loading on the second iteration onwards. For the first loop all the images can be seen but for the second loop, first or second image is not being displayed and showing some blank space at that place. On clicking the next or previous button again, that particular image is getting seen. What could have been the issue? Can you please let me get rid of this? Thanks in advance,
    Nilesh.

  30. 1380. Dennis on October 12th, 2012 at 1:07 am

    Hi there. Does this work with later versions of JQuery? I am getting an error when I drop in the easing JS file:

    Error: TypeError: f.easing[i.animatedProperties[this.prop]] is not a function
    Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
    Line: 4

    Please advise – thank you!

    Dennis

  31. 1381. Sohail on October 13th, 2012 at 6:08 am

    Hi, great and simple plugin. Just i want to know in auto example i want on mouseover of image it will pause. can you help in this regard or anyone did this.

  32. 1382. Sami on October 14th, 2012 at 11:28 am

    Hi & thanks for a nice lightweight plug-in.

    Fixed a bug with start != 0 && circular == true. This happens if you want to have a looping carousel which stores start index into cookie etc. A good behaviour with many carousel items and pages.

    Changed lines 303-309 to:
    if (to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
    curr = to == -v – 1 ? itemLength – (v * 2) – 1 : itemLength – (v * 2) – o.scroll;
    }

  33. 1383. ycsus on October 18th, 2012 at 1:01 pm

    Hi.
    1. http://www.gmarwaha.com/jquery/jcarousellite/#knownIssues
    There are broken link to this topic.
    2. I had some problem with your library. Problem was in calculation total width of wrapper block, if inner elements has margin.
    Hitch in:
    function width(el) {
    return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’) + 1;

    Why to add one pixel?
    I have substitute your function with standart jquery $(el).outerWidth(true) and it’s fix my problem. Maybe I didn’t consider something, but maybe this information will help you or somebody.

« 118 19 20 21 22 23 24 25 26 27 28 Show All