Add background image to jQuery carousel

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.

  • Golden Wheat Field
    Golden Wheat Field
  • Autumn
    Autumn
  • Big Buck Bunny
    Big Buck Bunny
  • Night In The City
    Night In The City
  • Sintel
    Sintel
  • Daffodil Flowers
    Daffodil Flowers
  • Dandelion
    Dandelion
  • Sakura Trees
    Sakura Trees
  • Red Tulips
    Red Tulips

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>

Running the jQuery carousel and slider on the same page

Question:

It seems that I can't run the carousel and slider at the same time. Is there a way to achieve this?

Answer:

When adding the codes, you need to remove the second jquery.js from the code (marked by red), then the the slider and carousel will work at the same time.

<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>

<script src="carouselengine/jquery.js"></script>
<script src="carouselengine/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="carouselengine/initcarousel-3.css">
<script src="carouselengine/initcarousel-3.js"></script>