Fork me on GitHub
Post Format

jQuery Content/Thumbnail Slider V2.0: jsCarousel V2.0

This is the updated version of jsCarousel, click here for original post.

jsCarousel v2.0 is a jquery slider plugin that slides contents in multi direction. Now it supports both horizontal and vertical orientation, see the screen shot below. jsCarousel v2.0 slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it’s up to you. One interesting thing about jsCarousel v2.0 slider is that you can make simple image gallery with thumbnail support by using it. jsCarousel v2.0 slider plugin gives you the source of image via callback function, when you click on some image within slider. See Using jsCarousel v2.0 Slider section below to get an idea about using the callback function.


jquery content slider

jsCarousel v2.0 Parameters
  • orientation: To use horizontal slider set orientation value to ‘h’ and for vertical slider set orientation value to ‘v’, default is ‘h’.
  • masked: Boolen value, set masked to true if you want overlay effect, default is true.
  • scrollspeed: Sliding speed in milliseconds for slider contents, default is 500.
  • delay: The delay in milliseconds between each slide shift, default is 5000.
  • itemstodisplay: Maximum no of visible items, default is 5.
  • autoscroll: If true slider contents will automatically shuffle, default is false.
  • circular: if true slider will start over after last item, if false slider will stop at last item if moving forward and at first item if moving backward. Circular property is only meaningful with autoscroll = false, as autoscroll is already circular. default value is true.
  • onthumbnailclick: Callback function to be called on each image click, jsCarousel slider will automatically find images and bind the callback function if provided.
Using jsCarousel Slider

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to jsCarousel-v2.0.0.js file
  • Add a reference to jsCarousel-v2.0.0.css file

Create a block element (div) within the body of you HTML file, assign it some id e.g ‘jsCarousel’. Next you need to put
some block elements (div) within above created element. All the first level(direct children) block elements will be used as slider items. You are free to add whatever elements you like within these first level child elements.
See the “divs” in the complete source code of the sample below. I’ve put single image and a span element within each first level elements, you can put some more interesting contents. e.g. News with images

Now add the following code to your HTML file’s head section.

 <script type="text/javascript">
        $(document).ready(function() {
            $('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
        });
    </script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Thumbnail/Content Slider: jsCarouselV2.0.0</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="jsCarousel-2.0.0.js" type="text/javascript"></script>

    <link href="jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
            $('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });
            $('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });

        });       
        
    </script>

    <style type="text/css">
        body
        {
            background-color: #2F2F2F;
            padding-top: 40px;
        }
        #demo-wrapper
        {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            padding: 40px 20px 0px 20px;
        }
        #demo-left
        {
            width: 15%;
            float: left;
        }
        #demo-right
        {
            width: 85%;
            float: left;
        }
        #hWrapperAuto
        {
            margin-top: 20px;
        }
        #demo-tabs
        {
            width: 100%;
            height: 50px;
            color: White;
            margin: 0;
            padding: 0;
        }
        #demo-tabs div.item
        {
            height: 35px;
            float: left;
            background-color: #2F2F2F;
            border: solid 1px gray;
            border-bottom: none;
            padding: 0;
            margin: 0;
            margin-left: 10px;
            text-align: center;
            padding: 10px 4px 4px 4px;
            font-weight: bold;
        }
        #contents
        {
            width: 100%;
            margin: 0;
            padding: 0;
            color: White;
            font: arial;
            font-size: 11pt;
        }
        #demo-tabs div.item.active-tab
        {
            background-color: Black;
        }
        #demo-tabs div.item.active-tabc
        {
            background-color: Black;
        }
        #v1, #v2
        {
            margin: 20px;
        }
        .visible
        {
            display: block;
        }
        .hidden
        {
            display: none;
        }
        #oldWrapper
        {
            margin-left: 100px;
        }
        #contents a
        {
            color: yellow;
        }
        #contents a:hover
        {
            text-decoration: none;
            color: Gray;
        }
        .heading
        {
            font-size: 20pt;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="contents">
        <div id="v2">
            <span class="heading">jsCarousel V 2.0.0</span> <a href="http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0">
                Back To Post</a>
            <p>
                This is version 2.0.0 of jsCarousel plugin, it supports both horizontal and vertical
                sliders. You can also control the mask effect directly from the plugin initializer
                function instead of modifying the CSS code in jsCarousel v2.0.0. To see demonstration
                for jsCarousel v 1.0.0 <a href="http://www.egrappler.com/contents/jsCarousel/Demo/index.htm">
                    click here.</a></p>
            <div id="demo-wrapper">
                <div id="demo-left">
                    <div id="vWrapper">
                        <div id="carouselv">
                            <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>
                                <img alt="" src="images/img_9.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_10.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_11.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_12.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_13.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_14.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_15.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_16.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                        </div>
                    </div>
                </div>
                <div id="demo-right">
                    <div id="hWrapper">
                        <div id="carouselh">
                            <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>
                                <img alt="" src="images/img_9.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_10.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_11.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_12.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_13.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_14.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_15.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_16.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                        </div>
                    </div>
                    <div id="hWrapperAuto">
                        <div id="carouselhAuto">
                            <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>
                                <img alt="" src="images/img_9.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_10.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_11.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_12.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_13.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_14.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_15.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                            <div>
                                <img alt="" src="images/img_16.jpg" /><br />
                                <span class="thumbnail-text">Image Text</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Update History
  • April 12, 2011 jsCarousel V2.0 released.
  • April 19, 2011 circular functionality added.
  • May 02, 2011 minor issue fixed.

Related Posts

  1. jQuery Content Slider :jsCarousel
  2. jQuery Slider/Trackbar: Smart Slider
  3. jQuery Image Preload Plugin: Smart Preloader
  4. RSS Driven Dynamic jQuery News Slider Plugin: Dynamic News
  5. jQuery Image Slider Plugin: Smart Background Slider

112 comments

  1. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding | EasyOnline.gr

  2. Pingback: 40 Plugins jQuery de Carruseles Para Mostrar Contenido con Éxito | www.templatemonsterblog.es

  3. Pingback: A1JavaScripts.com » JS Carousel – A multi direction slider

  4. Hello,

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

    Thanks,
    Maria

    Reply
  5. Pingback: 25个优秀的jQuery滑块教程及演示案例 | 站长站

  6. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding « Creative Digital Media

  7. 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!

    Reply
    • 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. :D

      Reply
  8. Pingback: Best Image Slider jQuery Plugins | Santhoshweb

  9. Pingback: 50 Best jQuery Slider Tools Part 1Best Smashing | Best Smashing

  10. 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

    Reply
  11. Hi – I’m having trouble finding where to size the master container for this item so it’s only 585 px wide, float right. I’ve tried containing it with many different parameters and nothing’s working. Can’t find a fix online or in your other tech support either. Please advise. GREAT SCRIPT btw… :)

    Reply
  12. 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.

    Reply
  13. 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

    Reply
  14. 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

    Reply
  15. 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. :)

    Reply
    • 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’ });

      Reply
      • 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.

        Reply
      • 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! :)

        Reply
  16. 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!! :)

    Reply
  17. Pingback: Call jQuery function in a loop with different parameters

  18. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | TEKNQ

  19. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler

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

    carousel content here

    Reply
  21. Pingback: Заметки программиста » Blog Archive » JQuery плагин jsCarousel 2.0

  22. Dalibor Sver

    13/02/2012 @ 1:50 pm

    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?

    Reply
  23. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding « CSS Tips

  24. Pingback: 50 Best jQuery Slider Tools Part 1 | Oktilyon Teknoliyon

  25. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding | Web Design

  26. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding | Template Monster Blog

  27. Pingback: 40 jQuery Plugins for Carousel-Type Content Sliding | Template Monster Blog

  28. Pingback: 50 Best jQuery Slider Tools Part 1 | Best Smashing

  29. Pingback: JQuery Slider Tools, 200 Best – part 1 | Free Website Template Center

  30. Pingback: JQuery Slider Tools, 200 Best! | Free Website Template Center

  31. 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.

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

    Regards,
    Hermo

    Reply
  33. 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?

    Reply
  34. 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?

    Reply
  35. 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.

    Reply
  36. 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.

    Reply
    • 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.

      Reply
  37. 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.

    Reply
  38. Pingback: XML-driven Vertical News Scroller Script using HTML and jQuery | EGrappler

  39. Pingback: Jquery Slider | INFOXE

  40. 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…

    Reply
  41. Pingback: Weekly Freebies: 25 Awesome Free jQuery Image Sliders and Carousels | Design Shack

  42. 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.

    Reply
  43. Pingback: Câteva colecţii de pluginuri jQuery | CNet.ro

  44. 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

    Reply
  45. 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

    Reply
  46. 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?

    Reply
  47. 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.

    Reply
  48. 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.

    Reply
  49. 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

    Reply
      • 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.

        Reply
        • 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.

          Reply
  50. 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

    Reply
    • 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?

      Reply
      • 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! :)

        Reply
      • 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); }

        Reply
      • 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.

        Reply
  51. Pingback: Jquery slider

  52. 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

    Reply
  53. 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.

    Reply
      • 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”.

        Reply
          • Amit Mahajan

            10/06/2011 @ 6:21 am

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

          • 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.

  54. 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?

    Reply
  55. scott hurley

    06/05/2011 @ 5:03 pm

    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

    Reply
    • 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; });

      Reply
  56. hi, great script, i have a small issue though, once you click one of the buttons left or right i cant go back

    i included the link where i am using and experimenting with it

    Reply
  57. 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.

    Reply
    • 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

      Reply
  58. 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!

    Reply
    • 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’ });

      Reply
  59. 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.

    Reply
  60. Pingback: jQuery Content Slider :jsCarousel « EGrappler

Leave a Reply

Required fields are marked *.


2 × six =