jQuery Content material/Thumbnail Slider V2.Zero: jsCarousel V2.Zero
That is the up to date model of jsCarousel, click on right here for authentic put up.
jsCarousel v2.0 is a jquery slider plugin that slides contents in a multi-course. Now it helps each horizontal and vertical orientation, see the display screenshot. jsCarousel v2.Zero sliders can be utilized as a function content material slider as nicely. You’ll be able to put any form of materials you need whether or not photos, textual content, movies, information and so forth. It is as much as you. One interesting factor about jQuery Content Slider is that you could make easy picture gallery with thumbnail help through the use of it. jsCarousel v2.Zero slider plugin provides you the supply of picture through callback perform if you click on some picture inside slider. See Utilizing jsCarousel v2.Zero Slider part under to get a concept of utilizing the callback perform.
Contents
jsCarousel v2.Zero Parameters
- Orientation: To make use of horizontal slider set direction worth to ‘h’ and for vertical slider set orientation worth to ‘v,’ default is ‘h.’
- Masked: Boolen worth, set masked to true for you overlay impact, default is true.
- Scrollspeed: Sliding velocity in milliseconds for slider contents, default is 500.
- Delay: The delay in milliseconds between every slide shift, default is 5000.
- Itemstodisplay: Most no of seen objects, default is 5.
- Autoscroll: If true slider contents will robotically shuffle, default is fake.
- Round: if true slider will begin over after final merchandise if false slider will cease merchandise finally if transferring ahead and at first merchandise, if moving backward. Round property is barely significant with auto scroll = false, as an auto scroll is already round. Default worth is true.
- Onthumbnailclick: Callback perform to be known as on every picture click on, the jsCarousel slider will robotically discover photos and bind the callback to perform if offered.
Utilizing jsCarousel Slider
In your HTML file add the next within the head part.
- Add a reference to newest jQuery script
- Count a reference to jsCarousel-v2.Zero.Zero.js file
- Add a reference to jsCarousel-v2.Zero.Zero.css file
Create a blocking aspect (div) inside the physique of your HTML file, assign it some id, e.g., ‘jsCarousel.’ Subsequent you have to put
some block components (div) inside above-created aspect. All the initial stage(direct youngsters) block components might be used as slider objects. You might be free so as to add no matter components you want inside these first stage baby parts.
See the “divs” within the full supply code of the pattern. I’ve put a single picture and a span aspect inside every first stage components; you’ll be able to put some extra fascinating contents. e.g. Information with photos
Now add the next code to your HTML file’s head part.
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
Right here is the entire code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Zero 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 material Slider: jsCarouselV2.Zero.Zero</title>
<script src="jquery-1.four.four.min.js" kind="textual content/javascript"></script>
<script src="jsCarousel-2.Zero.Zero.js" kind="textual content/javascript"></script>
<hyperlink href="jsCarousel-2.Zero.Zero.css" rel="stylesheet" kind="textual content/css" />
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
<type kind="textual content/css">
physique
#demo-wrapper
#demo-left
#demo-right
#hWrapperAuto
#demo-tabs
#demo-tabs div.merchandise
#contents
#demo-tabs div.merchandise.active-tab
#demo-tabs div.merchandise.active-tabc
#v1, #v2
.seen
.hidden
#oldWrapper
#contents a
#contents a:hover
.heading
</type>
</head>
<physique>
<div id="contents">
<div id="v2">
<span class="heading">jsCarousel V 2.Zero.Zero</span> <a href="http://www.egrappler.com/jquery-contentthumbnail-slder-v2-Zero-jscarousel-v2-Zero">
Again To Submit</a>
<p>
That is model 2.Zero.Zero of jsCarousel plugin, it helps each horizontal and vertical
sliders. You can even management the masks impact immediately from the plugin initializer
perform as a substitute of modifying the CSS code in jsCarousel v2.Zero.Zero. To see demonstration
for jsCarousel v 1.Zero.Zero <a href="http://www.egrappler.com/contents/jsCarousel/Demo/index.htm">
click on right here.</a></p>
<div id="demo-wrapper">
<div id="demo-left">
<div id="vWrapper">
<div id="carouselv">
<div>
<img alt="" src="photos/img_1.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_2.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_3.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_4.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_5.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_6.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_7.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_8.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_9.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_10.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_11.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_12.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_13.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_14.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_15.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_16.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
</div>
</div>
</div>
<div id="demo-right">
<div id="hWrapper">
<div id="carouselh">
<div>
<img alt="" src="photos/img_1.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_2.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_3.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_4.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_5.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_6.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_7.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_8.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_9.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_10.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_11.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_12.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_13.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_14.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_15.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_16.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
</div>
</div>
<div id="hWrapperAuto">
<div id="carouselhAuto">
<div>
<img alt="" src="photos/img_1.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_2.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_3.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_4.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_5.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_6.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_7.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_8.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_9.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_10.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_11.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_12.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_13.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_14.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_15.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
<div>
<img alt="" src="photos/img_16.jpg" /><br />
<span class="thumbnail-text">Picture Textual content</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</physique>
</html>
Replace Historical past
- April 12, 2011 jsCarousel V2.Zero launched.
- April 19, 2011, round performance added.
- Might 02, 2011 minor subject mounted.
js Carousel Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
4.2
Thanks, needed a clean vertical conveyor type slider. Works beautifully.
Hi — Is there a way to hide or disable the back/next arrows once you’ve reached the beginning/end of the carousel?
Nice plugin but I think in some versions of IE it’s not working.
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?
Hello,
I tried downloading the plugin and uploading the zip file and it failed. Am I missing something?
Thanks,
Maria
Where did you upload the .zip?
No maria, its working… you need to just follow the instructions of coding (copy, paste) and you will find solutions…
thanks
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!
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. 😀
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
Great Script
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.
Can you send me your sample code, it will be easy for me to fix if I have the sample.
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
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
Hi,
Thanks for the nice share, its wonderful, I want ask one question how can we use it for labels.
Thanks
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’ });
THANK YOU! 😀
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.
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! 🙂
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
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!! 🙂
Im afraid both features are currently not there, i’m working on an update for jsCarousel that will have both these and some other features as well. Thanks for using jsCarousel.
hi guys, it seems if i put this div id inside my div class, its not showing normally?
carousel content here
Make sure you resolve any style conflict.
Great share, Thank you for sharing
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?
What value you have assigned to ‘itemstodisplay’ parameter? It has to be the exactly the number of items you want to display at one time.
any way to get vertical images to appear without distortion in thumbnail view?
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.
Hello,
I need add this plugin four time to my page (horizontal).
If more then one then other dont work.
Regards,
Hermo
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?
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?
If you see your code, there are lots of within hWrapper element. Try removing those spaces.
OMG! That did it! Thanks.
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.
P.S.: that should read IE v8 not IE 8)
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.
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.
I dont promise, but I’ll get it a try provided I’ve some time.
Thank you , But what about cross browser compatibility issues
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…
thanks was looking for such a slider
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.
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
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
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?
Hi – Can each image link to a page within my website instead of a popup screen?
Thanks!
Wrap your images with “a” tag and don’t provide click handler.
Hi, I am wondering if I can link the image and text to a page within the website?
Thanks – great plugin 🙂
You can put any content, whether its link or images whatever, just dont provide the callback function 🙂
thanks
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.
You need to change the width for image wrappers and the wrapper for the contents
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.
Just change the width of both wrapper and the horizontal-content classes
How to scroll one item with autoscroll?
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.
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.
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.
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?
Did you ever figure this out, Shane? I’m looking to update this as well.
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! 🙂
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); }
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.
I’m trying to get images to load with viewbox.js when you click them. What would I use for onthumbnailclick?
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
Change the structure of html e.g. remove <br/> from your markups after each image
<div> <img src=”images/img_1.jpg” /><br /><span class=”thumbnail-text”>Image Text</span></div>
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?
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
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.
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?
you need to set the value of circular to true
Is there any way to make the image pop up?
Thanks!
Yes, 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 🙂
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; });
Thanks works great
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
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!
Thanks for sharing
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’ });
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.