jQuery Content material/Thumbnail Slider V2.Zero: jsCarousel V2.Zero

You may also like...

92 Responses

  1. Thanks, needed a clean vertical conveyor type slider. Works beautifully.

  2. Audrey says:

    Hi — Is there a way to hide or disable the back/next arrows once you’ve reached the beginning/end of the carousel?

  3. Nice plugin but I think in some versions of IE it’s not working.

  4. Chris says:

    Hi, is there a solution to moving one image at a time? I’d really love for this feature. Any ideas on how to do this?

  5. maria says:

    Hello,

    I tried downloading the plugin and uploading the zip file and it failed. Am I missing something?

    Thanks,
    Maria

  6. Marindia says:

    It stops working if I keep clicking on any of the lateral buttons. Once it’s in the end (or beginning) there’s no way to make it work again. This happens even with in the Demo!

    • Jake says:

      Hello there,

      Go to the script and find line 114 – 128. Get rid of the condition ‘if not scrolling’… This worked for me. I hope it does for you too. Have a good one. 😀

  7. Paul M says:

    Great little script, just one question or maybe im being thick. Does the script automatically generate thumbnails for images? This line in the description made me think it does ‘ can make simple image gallery with thumbnail support by using it’.

    Thanks
    Paul

  8. Sara says:

    Thank you for this plugin. I have set it up and have 4 thumbnail pictures with numtodisplay set to 3. I have set circular to true so it repeats items. It slides the images in and looks great, however when I click forward or back nothing happens. I can’t get it slide the additional thumbnails in. Please help.

  9. Thanks for the plugin! I would like to change the plugin so, that the thumbs do not slide in from the left (horizontal) initially. Can you give me a hint how I can achieve this. thanks.rico

  10. Shirley says:

    Hi Muhammad,

    First, thank you for this script. It is exactly what I was looking for, but I do have a couple glitches I need help with. I would be happy to make a donation if you can help me out? Please. Please. Please. 🙂

    1) I added links to the images in my slider, but when I click on an image a small windows opens giving the image location. I have to click the OK button on the small window to close it, THEN it will open to the page I have it linked to. How can I get rid of the small window?

    2) Another issue that has come up, is that when the page initially loads, only 3 images show up in the slider. I have it set to show 4. When I click the arrow it slides and 4 images show up. But initially it is just 3. So confused. :S

    Any help/suggestions are hugely appreciated.

    If it is helpful, here is the link to the page I am trying to put together: http://madhat-press.com/index_jscslider_nav2.html

    Thank you,
    Shirley

  11. filimia says:

    Hi,
    Thanks for the nice share, its wonderful, I want ask one question how can we use it for labels.

    Thanks

  12. Shirley says:

    Hi, I feel really dumb asking this but after hours of getting Nowhere, I must ask… HOW do I use ONLY the horizontal (top example) slider??? I don’t want all three, but am not able to figure out how to get rid of the two I don’t want. :S Thank you in advance.

    PS I love the sliders and soooo want to incorporate it into a website I am trying put together. Help please. 🙂

    • Add the following code somewhere in the body of your HTML document.

      <div id=”carousel”>
      <div>
      <img alt=”” src=”images/img_1.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_2.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_3.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_4.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_5.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_6.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_7.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      <div>
      <img alt=”” src=”images/img_8.jpg” /><br />
      <span class=”thumbnail-text”>Image Text</span></div>
      </div>

      Now add this line in head section within document ready function.

      $(‘#carousel’).jsCarousel({autoscroll: false, masked: false, itemstodisplay: 5, orientation: ‘h’ });

      • Shirley says:

        THANK YOU! 😀

      • Shirley says:

        Me again…I am making progress! Thank you so much. I have one more question please.

        When I click on a thumbnail in the slider a small windows opens giving the image location. I have to click the OK button to close it, THEN it will open to the page I have it linked to. How can I get rid of the small window?

        Much appreciate your help.

      • Shirley says:

        Another issue that has come up, is that when the page initially loads, only 3 images show up in the slider. I have it set to show 4. When I click the arrow it slides and 4 images show up. But initially it is just three. So confused. :S

        Any suggestions are hugely appreciated. Thank you! 🙂

  13. Someone says:

    hi, tnx for the script! 🙂

    two questions:
    1. is it possible to scroll one image at a time?
    assuming i have 4 images in total, and i want to display 3 each time, can it do something like that:
    screen #1- 1 2 3 – display images 1,2,3, press “next”
    screen #2- 2 3 4 – display images 2,3,4, press “next”
    screen #3- 3 4 1 – display images 3,4,1(rotation starts), and so on..

    2. let’s say the display area width is 500. my images width is 200 each, so three images won’t fit. right now it shows two full images and a blank space.
    is it possible to show two full images and a piece of the third? (as much as will fit in the 500 width)

    tnx!! 🙂

  14. jeff says:

    hi guys, it seems if i put this div id inside my div class, its not showing normally?

    carousel content here

  15. Great share, Thank you for sharing

  16. Dalibor Sver says:

    Hello, I have the same issue Anonymous mentioned above:
    I have 4 pictures. When I scroll to the right, last 2 pictures repeat. How can I work this around?

  17. dennis says:

    any way to get vertical images to appear without distortion in thumbnail view?

  18. LisaD says:

    thanks for this script. Its exactly what I have been looking for. I’ve been able to adjust the css to make the vertical slider longer and thinner, but I’d like to have less space in between the thumbnails and I would also like the thumbs and text centered. Is this possible. Another issue I am having – when scrolling, I am seeing hidden images showing up behind the visible images.

  19. hermo says:

    Hello,
    I need add this plugin four time to my page (horizontal).
    If more then one then other dont work.

    Regards,
    Hermo

  20. Housni says:

    Great script Shahbaz. Perfect for my needs.
    However, I have one problem where the callback is being called twice. I noticed that the previous version doesn’t have this issue.

    Is there a fix for this?

  21. jzzl says:

    All of my images are scrolling below the scroller container, even with the original style sheet settings. Any idea on what is causing the images to roll below the container?

  22. Thank you SO much for creating this script – it’s very awesome – as are you for sharing it!

    Regarding Ashley’s question about adding links. You will also need to edit the javascript (line 14 in the jsCarousel-2.0.0.htm file). Change:
    function(src) { alert(src); },
    to
    function(src) { load(src); },
    Otherwise, your links will open multiple windows.

    Also, my husband tested this on a PC (IE 8) and it worked fine.

  23. mateus says:

    it’s possible to use several instances with diferent parameters, like width, heitgh, colors, etc.

    in the demo have two horizontal instances, but both have the “shell” identical. (black gray etc)

    Thanks a lot.

    • Yes, you can use as many instances as you like. Yes they are exact same as look wise, they one is auto while other is manual scroll. They are just show different features. You can style them whatever way you like. If you have some cool design you can share it here with other readers.

  24. mykull says:

    Any chance you can make this IE 6 friendly? I know, I know IE 6 is dead but it’s a requirement from the client.

  25. John says:

    Thank you , But what about cross browser compatibility issues

  26. AntandBee says:

    that’s great, thanks so much.
    Dear Sir/Madam, If I want to set “ItemToDisplay:5” and then when I click right_arrow to move 1 item… How to do that…

  27. henry says:

    thanks was looking for such a slider

  28. Zafar says:

    Hi,

    I am using this plugin and it’s working fine. just the issue is that i have 14 images coming from database, but the slider is repeating images, from database it is 14 but while showing in this slider, it displaying 16 images. due to this repeatation our fancybox which we are using to display youtube video is not working as we are passing the id’s. so when we have two same images as it repeated by slider, then our fancybox is not working and open the video in next page. Kindly lead me.

    your help will be greatly appreciated.

  29. Arastu Shah says:

    Hi
    My list has and tags. How can I change your code from div so that I can use your plugin for ul and li.
    Please let me know.
    thanks

  30. hmet says:

    Muhammad, really nice plug

    May you send to me an example on how to make thumbs on horizontal (5) thumbs, to open a lightbox?
    You wrote:
    “the plugin has a callback function onthumbnailclick which gives you the src of the image, with in this callback you can show the image in a pop up or wherever you want ”
    I’m just start learning Js, and I don’t understand what have I to change to get what you say
    At present, in your example as it is, the big images are not displayed
    I got instead the message “stop executing this script”

    shukran jazilen for helping me

  31. topliner4u says:

    Hello Nice to meet you. Consists of a slider to your’m mounting, then the image when the mouse over an image to the box is gone. The image appears when the mouse out. In this case, what is the reason?

  32. Ashley says:

    Hi – Can each image link to a page within my website instead of a popup screen?

    Thanks!

  33. Ashley says:

    Hi, I am wondering if I can link the image and text to a page within the website?

    Thanks – great plugin 🙂

  34. Andres says:

    Hi, first of all, this is a really cool plugin.
    I’m trying to make the size of the carousel relative to the size of the screen. But I have a problem. For instance if I set the max number of items to 5, and the size of the screen does not allow to show all of them (e.g. only 3 are shown ). The 2 items that are not shown never appear again. So, with the fruit example it is only possible to see 12 of the It is possible to make them show in the next slide?

    Thanks in advance.

  35. Bryan says:

    For some reason when I change the itemstodisplay value in the html and jscarousel-2.0.0.js it does not affect the bar at all, it still only shows 5 items. Is there something else I am also supposed to change besides the html and js files?

    Also, for some reason it cuts off my text under the tabs, any idea for this?

    PS: How do I center the tabs and align the prev and next buttons at the outermost edges of the left and right respectively?

    Thanks, great plugin.

  36. helg says:

    How to scroll one item with autoscroll?

  37. flatiron says:

    Hi,
    I used your plugin and is great, but if you reach the limit, backward or forward, the slider doesn’t works anymore. This is caused by the scrolling variable that remain set to true and never change. I set scrolling to false near line 184:
    } else {
    index = 0;
    scrolling = false;
    }

    and near line 218:
    } else {
    index = noOfBlocks – 1;
    scrolling = false;
    }

    This is the init code:
    $(‘#jsCarousel’).jsCarousel({ onthumbnailclick: function(src) { $(‘#jsCarouselImg’).attr(‘src’,src.replace(‘thumbs/’, ‘large/’)) },itemstodisplay: 4, autoscroll: false, masked: false });

    Bye,
    Alberto

    • The jQuery Content Slider plugin has a parameter circular which gives you the desired functionality when set to true. Checkout the original post for details.

      • Damon says:

        The issue flatiron is having is not that it’s circular, but that once you arrive at the end you can go neither forward OR backward. both buttons cease to work.

        • Marc says:

          Im having this same issue, it all loads fine, images scroll in, then click the arrow to see more thumbnails and it scrolls to the last one and then stops the left and right buttons working. Kinda useless if you can only scroll through the images once. Has anyone found a fix for this yet?

          i would try Flatirons original post but i dont even have 218 lines in my .js file and his init code gave me an error in the html syntax.

  38. Natan says:

    Hi!
    thanks for the plugin…

    Im trying to start a vertical slider, with the first item of the list, at top…
    for default, with or without circular mode, the plugin start with the last item at top…
    can anyone help me to make a mod to do this??

    thanks
    Natan

    • It happens with both vertical and horizontal – it seems to use the last div first. Is there a way to change this to use the div’s in the order they appear in the HTML?

      • Steve says:

        Did you ever figure this out, Shane? I’m looking to update this as well.

      • JonjoJr says:

        in order to switch that around you have to change the line 96:

        from: slidercontents.append(wrapper);

        to: slidercontents.prepend(wrapper);

        or you can do what i did which it was add a setting on like line 4:

        function(options) {
        var settings = $.extend({
        scrollspeed: 1500,
        delay: 5000,
        itemstodisplay: 5,
        autoscroll: false,
        circular: false,
        masked: true,
        onthumbnailclick: null,
        orientation: ‘h’,
        direction: ‘forward’,
        leftToRight: true,
        displayEndFirst: false // here is the new setting
        }, options);

        then on line like 96 do this:

        if(settings.displayEndFirst)
        { slidercontents.append(wrapper); }
        else{ slidercontents.prepend(wrapper); }

        enjoy! 🙂

      • JonjoJr says:

        in order to switch that around you have to change the line 96:

        from: slidercontents.append(wrapper);

        to: slidercontents.prepend(wrapper);

        or you can do what i did which it was add a setting on like line 4:

        function(options) {
        var settings = $.extend({
        scrollspeed: 1500,
        delay: 5000,
        itemstodisplay: 5,
        autoscroll: false,
        circular: false,
        masked: true,
        onthumbnailclick: null,
        orientation: ‘h’,
        direction: ‘forward’,
        leftToRight: true,
        displayEndFirst: false // here is the new setting
        }, options);

        then on line like 96 do this:

        if(settings.displayEndFirst)
        { slidercontents.append(wrapper); }
        else{ slidercontents.prepend(wrapper); }

      • bdawg says:

        Don’t know if this is the best way, but this worked for me…

        At line 50, change:
        index = noOfBlocks – 1;
        to
        index = noOfBlocks – noOfBlocks;

        that subtracts the number of block divisions and starts it at the opposite end but the same number of blocks present.

  39. I’m trying to get images to load with viewbox.js when you click them. What would I use for onthumbnailclick?

  40. aditya says:

    i want to align text not at bottom but on right of each image like
    image-text —— image-text ——image-text

    in stead of the default
    image —— image —– image
    text ——— text ——- text

  41. Anonymous says:

    Hi! I’m not sure if last post came through. There’s really big loading issue when you Submit.

    The problem I have with jsCarousel is that when I have example 18 images and I’m showing 5 images per “page” and when I go from first “page” to second “page” it shows two images from the first “page”. I think that this is because 18 is not possible to divide with 5, but I don’t know how to fix it.

    Thank you for your help.

    • can you show me how you are using the slider, any link that i can see?

      • Anonymous says:

        Thank you for your reply.

        You can see the same problematic behaviour in your demo in carouselh. You see that when you change “page” there’s apple and bananas again. The same images which are in the first “page”.

        • This is not an issue, its just a circular behaviour to accommodate the blank space if images left are less than itemstodisplay

          • Amit Mahajan says:

            Hi will you help me for how to stay with blank space if images left are less than itemstodisplay

          • Jana says:

            If you have 7 images in total, and want to display 4 per page.. simply do the following to allow for the slider to not duplicate the image from the 1st page, to the 2nd page:

              <– input blank divs to fill the spaces you want to remain blank in the slider.

  42. Anonymous says:

    I have 18 pictures in the carousel and I show 5 at once. It seems that there’s a problem because 18 cannot be divided with 5, so when I move right first time, it shows 2 same pictures than what was in the first “page”. Any solution for the problem?

  43. you need to set the value of circular to true

  44. Mary Cortes says:

    Is there any way to make the image pop up?

    Thanks!

  45. scott hurley says:

    Hey I love the script
    Is there a way to make the images come from the right instead of the left on initial load.
    Thanks

    • very simple just replace the line (line no 107)
      $(‘> div:eq(‘ + index + ‘)’, slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
      with
      $(‘> div:eq(‘ + index + ‘)’, slidercontents).css(‘left’, containerWidth + ‘px’).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });

  46. Joel Glover says:

    I have having an issue with jsCarousel. I only have two images for the slider, because I am using it as an ad banner. After is slides past the photos a couple of times it goes black until the timer calls for it to slide again. How can I fix this? Thanks.

    • There was an issue in the script, which is fixed now. you can either replace the following code in changeSlide function
      if (index <= 0) index = noOfBlocks -1;
      with
      if (index <= 0) index = noOfBlocks;
      or download the latest script Here

  47. aj says:

    hi, thanks for making this plugin. i’m having a few issues. i noticed the same bug exists on your demo page. if you scroll through to the end of the images, after it’s done scrolling, the thumbnails disappear. any ideas? thanks!

  48. Laufer says:

    how to exclude onthumbnailclick

    • That’s pretty simple, just dont include onthumbnailclick in initializer function e.g.

      $(‘#my-thumbnail-container’).jsCarousel({ autoscroll: true, masked: false, itemstodisplay: 3, orientation: ‘v’ });

  49. Ragini says:

    Is the plugin not compatible with IE?
    Its working perfectly in safari but in IE its messed up.

    Please let me know? I really need this.

Leave a Reply

Your email address will not be published. Required fields are marked *


Make sure you enter correct answer before you hit \'Send\' button *