We Keep Coding

carousel javascript several times

I wanna use this carousel :
[http://codepen.io/ScottMarshall/pen/FwxpH][1] on a forum, but when I repeat the code, it doesn't work well.
Can you help me ?
here, it's working, but the second container doesn't want and I don't want to change anything in the HTML...
JSFiddle

Here is working fiddle: http://jsfiddle.net/1x6251wc/2/
This is the key change to get the context "Front" instead of all of them:
var $front = $this.parent().find(".Front");
It's a poorly written plugin, but this change should get it to work across multiple instances.

Combine two line of codes in one function with JavaScript

I'm using Cycle slideshow and setTimeout() to give it seconds of delay
I want to to combine these two line of codes below to execute them simultaneously. But, I don't know how to accomplish this in JavaScript.
$('#slideshow').cycle('resume');
$('#slideshow').cycle({
sync: false,
speed: 300,
})
I want to put them in one line like this:
$('#slideshow').cycle(??????///here is your help////??????");
If I don't do this, the slide show, again, starts from the initial point and I don't want it.
How may I solve this?

Without looking in detail at the plugin's source code, I think from your description, that the plugin automatically starts from beginning whenever you set its options. That seems reasonable, as the plugin likely has to recalculate things from scratch whenever its options are changed.
Can you set the options once, e.g. during initialization, halting it then if necessary:
$('#slideshow').cycle({sync:false, speed:300}).cycle('pause');
Later, when you want to start the show, just resume it
$('#slideshow').cycle('resume');
Alternatively, you could look into setting the global options before initializing the slideshows.

try this:
$('#slideshow').cycle('resume').cycle({sync: false,speed:300,});

jQuery function show divs with display: none

I have some jQuery code, which attempts to show the first 6 divs on page load and hide all of the others. It is littered with errors, but ideally I am trying to create a function that shows the next six divs on an event, ultimately when the user scrolls to the bottom. I know my code is not great, but I have done my best to make it as easy to follow as possible.
The code is here, and any help would be much appreciated! Thanks in advance

I think this is what you wanted:
http://jsfiddle.net/gRzPF/8/
If I understand correctly every time you get to the bottom of the window you want to show the next 6 divs. My edit achieves that.
You just needed to use semi-colons in your for statement, wrap a function around it and move your constraintNumber variable inside that function.

replace
for (i = contentNumber, i < constraintNumber, i++;) {
by
for (i = contentNumber; i < constraintNumber; i++) {
in javascript (and C), ; must separate the 3 elements of a for statement
in jsfiddle, you have 'JSLint' button to verify code error !! Use it !

Here http://jsfiddle.net/gRzPF/7/ I modified your code, now it seems to work :)

jCarouselLite not working with <3 list items

EDIT: This is not a problem with the jQuery creating the appropriate markup from SharePoint Announcement List to use jCarouselLite. It seems to be a problem within jCarouselLite. I have done another jsfiddle with just the appropriate markup, not the jQuery/javascript conversion code, and the problem still occurs.
You can see the problem at http://jsfiddle.net/ayatollah/6RKNx/
Again it is only a problem with 1 or 2 list items. 3+ works fine. Should I be changing the markup, our jCarouselLite calling code to fix this?
Bounty will be offered as soon as it's available!
ORIGINAL===============================================================================
I have an Announcement List in a Sharepoint site that I want to convert to a jCarousel. The Announcement List is rendered as a table so I have put together some jQuery code to convert it to the required ul structure.
The jQuery seems to be doing its job but the jCarousel gives some weird behaviour. The first announcement displays as it should, then the second announcement scrolls in as it should. However, for each scroll after this it flashes up the first announcement, then scrolls in the second. When it should just scroll in the first again.
I had it working correctly but it was displaying blank announcements, so I introduced some code to filter out the blank announcements. Here is a jsfiddle to show you the problem.
http://jsfiddle.net/RzeEX/2/
The only change I made from the previous code was to add the extra boolean value:
&& $(listitem).text() != "\xa0"
Seen at: http://jsfiddle.net/RzeEX/3/
However, in the above fiddle the code works exactly as the previous one, but on my server it displays an extra blank announcement. Don't know why I can't replicate it here.
Anyway, anyone have any ideas?
EDIT: Actually just testing it with more than 2 announcements and it seems to work. See http://jsfiddle.net/RzeEX/4/
It is now working as expected, but have 2 announcements and it is still broke, have 1 announcement and nothing shows! It must be something to do with the jQuery as I would believe the jCarouselLite plugin to work.
See http://jsfiddle.net/RzeEX/5/ for the single announcement.

Since it is my understanding that you might have a dynamic list of elements, you can do something like this:
$('.viewport').jCarouselLite({
auto:1000,
speed:1000,
visible: $('#announcementList li').length
});
That way it won't matter if you have 1, 2 or 100 elements. It will always work as it should.
Here's the jsfiddle: http://jsfiddle.net/XS87c/

I think by setting visible:2 may give the desire result.
$('.viewport').jCarouselLite({
auto:5000,
speed:1000,
visible:2
});
let me know if it does not work.

how many do you want to be visible? what behaviour do you want if there is < # visible. I ran into this exact problem, and solved it by not applying the carosel if there was < # visible in the list.
something like this should do the trick:
if ((document.getElementById('viewport') != null) && $('#announcementList').find('li').length >= 3 ) {
$('.viewport').jCarouselLite({
auto: 5000,
speed: 1000
});
}

Complementing the solution of Irfan, you can do:
if(document.getElementById('viewport') != null) {
var options = {auto:5000,speed:1000};
//Here we count the number of items and set it for a better display for 2 and 1 item
if($('#viewport a').length <= 2) {
options.visible = $('#viewport a').length;
}
$('.viewport').jCarouselLite(options);
}
So if you have on or two elements you will see just one or two. But if you have more than two elements you will see just three elements.

Auto pagination of set number of items (with auto scroll)

I am trying to find a jQuery script that will take list items and virtually paginate them into 9 items per page. I have seen similar scripts on Dynamic drive, but they do not auto-play.
For example: http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm
Demo #1 here is almost perfect if it auto-played with a slide or fade effect. Is there a script out there that does this? Or is it easy to modify this script?
Any help is appreciated!
Thanks.

"autoplay" as you described can be achieved with a setInterval. Now I dont know the internals of that script, but something sort of like this should work.
// New image every 3 seconds
setInterval(function() {
slideShowObj.next();
}, 3000);
Where "slideShowObject" is some object that has a next function that shows the next item. Filling in that middle line is up to you.