Discussion on UtilCarousel Responsive jQuery Carousel Plugin


hkeyjun does not currently provide support for this item.

133 comments found.

We just brought this plugin. But question is our site use require.js. But the source code Hammer defined carousel.min.js. So the require js can not find the file even I change the path to our libs. I try to use the up to date hammer library but it didn’t work. Do you have any suggestion please?

I seem to be having a issues with the carousel its not functioning everything looks good but its not moving when I click on the buttons to go to the next team member.

If I set this up to show 3 images at a time will the same code also function correctly with 1 or 2 images?

Sorry for delay! Yes!

Ok. Is it compatible with latest Jquery and Bootstrap? (IE: Does not conflict with Bootstrap)

It’s possible to start not from element 0 but from element 1 or 2?

You can use the API method after init utilcarousel, like this: //Init plugin $('#api-demo').utilCarousel(); //Get UtilCarousel Instance var utilCarouselObj = $('#api-demo').data('utilCarousel'); //Go to the specified index, index start with 0 utilCarouselObj.goTo(3);


Hi there! Great plugin, love it! One question, how can i point to the active ( visible/s ) item/s? Maybe add some css class in it?

Hello! I like your plugin, but my question is when an image is hovered over, if I can just show the icon for a link. I am just going to be using it for links and not for showing a bigger image (which is what the magnifying glass icon seems intended for). Can I choose what icon shows on hover? Thanks!

Your site is down (expired domain), you may want to look into that.

Is there a way to make it smooth scrolling? I did try these settings: autoPlay: true, interval: 0, slideSpeed:30000,

the result jumps around unfortunatly

Hi hkeyjun,
thank you for the great plugin.
We sent you a support request a week ago but we got no answer, so I’m going to write you here, I hope you can help us.
This is my carousel init:

$(function() {
        responsiveMode : 'itemWidthRange',
        itemWidthRange : [240, 340],
        autoPlay : false,
        interval : 3000,
        pagination: false,
        navigation: false,
        navigationText : ['<', '>'],
        drag: true,
        rewind: true,
        pauseOnHover: true,
        lazyLoad: true,
        showItems: 3,
        responsive: true


    //Get UtilCarousel Instance
    var utilCarouselObj = $('#focus_on-carousel').data('utilCarousel');

    //Go to previous item
    $('#prev').on('click', function() {

    //Go to next item
    $('#next').on('click', function() {


With this initialization i can see 3 items after the page loading,then i can scroll through the others elements by clicking the navigation arrows. I can see the first 4 images correctly but from the 5th image i see only a blank placeholder. That placeholders remains in the page until i resize the browser window. I have already tried to remove title and description to avoid html tag error (something like a not closed paragraph), but the strange behaviour remains. How i can do to solve this issue? Thank you very much.

Hi There, I am attempting to integrate this into a theme file, and when I fire the script the mark up disappears. I am running jquery 3.2.1. and have enqued the script/styles. Any suggestions?

[carousel here!] Any content here! Any content here! Any content here! Any content here! ... <script> $(document).ready(function(){ $(’#carousel-demo’).utilCarousel({ responsiveMode : ‘itemWidthRange’, itemWidthRange : [260, 320] }); }); </script>

Sorry the post has picked up my html :)

[carousel here!]
Any content here! Any content here! Any content here! Any content here! ...
        responsiveMode : 'itemWidthRange',
        itemWidthRange : [260, 320]

Is there a way to hide the arrows if there aren’t enough items to go next/back?

This is no longer functioning since I upgraded to Font Awesome 5.0.2. Firebug offers the following: “TypeError: a.$items.size is not a function jquery…..min.js (line 10, col 2273)”


Mick_ Purchased

Hello, Your script is not compatible with jQuery 3. Do you have an update available?

TypeError: a.$items.size is not a function