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.

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.

Can we place hyperlinks to each slide?

Question:

Can I place hyperlinks to each slide in the carousel?

Answer:

In Slides dialog, after adding images, click and select an image, then in the bottom of the dialog, there is an option “click to open web link”. You can choose to open the current image or video in a LightBox popup, or you can enter a web link.

jQuery Carousel not working in Internet Explorer

Question:

Absolutely love your products, Slider and Carousel. Thank you.

My problem is that the carousel is working beautifully on all browsers I have tried except IE. The page with carousel works fine on Firefox, Chrome, Opera, Torch, and Safari but not IE regardless if the OS is XP, Vista, or W7.

Answer:

It’s because the DOCTYPE of your webpage triggers the quirk mode of Internet Explorer. You can view this tutorial: http://amazingslider.com/amazing-jquery-slider-internet-explorer-and-quirks-mode/

In short, currently, at the beginning of your webpage, the code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

You need to change it:

<!DOCTYPE html>
<html>