Monthly Archives: July 2014

Allow carousel to have fewer items than the visible number

Posted on by

Question:

I am using php to dynamically generate the list elements within the carousel on a page. Rather than having to have a different JS file for each page I would like all of the settings for the carousel to remain the same, to create visual consistency, but allow the carousels to have fewer than the visible number in the list.

For example – one list may have 2 items but i have 4 elements defined as visible. The JS automatically puts 2 more elements in the list and as you scroll through the carousel, whitespace shows up and eventually all of the items disappear.

Is there some setting i can tweak to make this work properly in the JS? I would rather the carousel not add elements if there are fewer than the visible definition. Which does seem to work properly when there is only 1 list item but not when it is 2 or more and less than visible.

Answer:

In the application, Step 2, Overview tab, Scroll mode, uncheck the option “Circular”, then it won’t add any extra items to the carousel.

Add background image to jQuery carousel

Posted on by

Question:

We are playing around with the free version now. Quick question – how do I create a background image that stays static to the carousel?

Answer:

There are two ways to do it.

The first way is to add the background image in the application. You can do this in the application, Step 2, Skins dialog, Style tab.

The second way is to define a background image for the parent div of the carousel in your webpage HTML code:

1. You create a div with the specified size and setup a background image for this div.
2. You add the carousel code to the div.

The HTML code of the parent div in the above demo is as following:

<div style="width:96%;margin:0 auto;background:url('/wp-content/uploads/2014/07/background-0.jpg') no-repeat center center;">
</div>