How to stop the jQuery carousel from loading YouTube and Vimeo API

Question:

I do not have any videos running in the carousel. How can I stop the carousel from loading the YouTube API?

Answer:

By default, the jQuery carousel will load the YouTube API and Vimeo API. If your carousel doesn’t have any videos, you can add the following HTML code to your webpage to stop the carousel from loading them:

<div id="html5lightbox_options" data-inityoutube="false" data-initvimeo="false"></div>

Below is a screenshot of how it looks like in the HTML code:

jquery-carousel-no-youtube

Add web link to carousel content template

Question:

I’m wondering if there is a __LINK__ var or else as there are are for TITLE and DESCRIPTION carrousel item
I’m trying to manage a specific content template and i would like to use such a variable.
Maybe it is available in the last carrousel version ?

Answer:

Yes, it’s called __HREF__

For example, you can use the following code for content HTML template:

<div class="amazingcarousel-image">__IMAGE__</div>
<div class="amazingcarousel-title">__TITLE__</div>
<a href="__HREF__" target="_blank">Read More</a>

With the above content HTML template, you can create a carousel like following:

Autoplay jQuery carousel and display URL in carousel title

Question:

I love your amazing slider and all other tools you are offering. Now, in this case – I would like check if I can use the JQuery Carousel, to show mp4 videos of property listings. Please let me know the following:

– Could it be set to autoplay, so that the Carousel is moving within a preset time

– Could the text title be an URL, which points to a description page on the website – or maybe the title replaced by an image icon with URL.

Answer:

In the application, step 2, Skins dialog, you can check the option “auto play”.

HTML tags are supported in Version 2.2 and after. If you are not using the latest version, you can goto our website https://amazingcarousel.com/downloads/ to download it.

You can use HTML tags in the title and description, for example:

<a href="https://amazingcarousel.com" target="_blank">Amazing Carousel</a> rocks!

You can also add an image link to the title, for example:

<a href="https://amazingcarousel.com" target="_blank"><img src="http://www.yourwbsite.com/yourimage.png" style="border:0;" /></a>

In the above code, http://www.yourwbsite.com/yourimage.png is the URL link to your image.

Change visible items according to screen size

Question:

I bought a license for Amazing Carousel and it is freaking awesome. I love how extensible the css and js is.

I have tinkered with the media query in the initcarousel-1.js file and am delighted how flexible the carousel adjusts to screen widths.

mobile: {
  screenwidth: 600,
  visibleitems: 1
}

I would like to be able to have 1 item displayed when over 840px wide, 2 if under 840 but over 640, and back to 1 again for under 640. I’ve tried tinkering with that code and got error messages every time. Any clever concise way to do this without resorting to way more js than I want to deal with?

Many thanks for a great product!

Answer:

In the application, step 2, skins dialog, overview tab, change “Visible items” to 1.

In the same tab, change the screen query to following:

{
  medium: {
    screenwidth: 840,
    visibleitems: 2
  },
  mobile: {
    screenwidth: 640,
    visibleitems: 1
  }
}

With the above change, the carousel will have 1 item by default, it will change to 2 items when the screen size is under 840, and go back to 1 when the size is under 640.

Allow carousel to have fewer items than the visible number

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

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>

Slow carousel rotation speed

Question:

We purchased your carousal yesterday and are very happy with it.

I am trying to find an option for slowing the rotation speed.

Answer:

In Step 2, Skins dialog, Overview tab, you can change the value of Transition -> Duration, it’s the transition speed.

You can also change the value of “Interval”, that’s the time interval between each transition if auto play is on.

How to remove the watermark from Enterprise version of Amazing Carousel

Question:

We have bought the enterprise version of Amazing Carousel​, and want to get rid of the watermark.

Is there an easy way to get rid of the watermark?

Answer:

You need to re-create the carousel with the Commercial Version:

1. Please enter your activation code to the software to register it.

2. You need to re-create the carousel with the registered version.

When recreating the carousel, in the software, step 2, Skins dialog, “Watermark” tab, please make sure the “Add Watermark” option is unchecked.

3. After re-creating the carousel, update the carousel files on your web server.

Please also clear caches of your web browser before testing again.