How to customize carousel skin CSS

With the professional pre-made skins in Amazing Carousel, you can create a responsive jQuery carousel without writing JavaScript or CSS codes. But you can still further customise the skin by editing the CSS codes or even create your own unique skin.

This tutorial will guide you how to customise the skin CSS. To follow this tutorial, you need to have a basic understanding CSS.

1. Customise the position of left and right arrows

You can customise the position of the arrow buttons in the Skins dialog, Arrows tab.

To support multiple carousels in one webpage, the prefix #amazingcarousel-CAROUSELID is added before the class name. CAROUSELID will be replaced with the value of current carousel id in the resulting CSS file.

You can use CSS properties left, top, right, bottom and margin to define the position of the arrow buttons. For example, the following codes will place the arrows on the left and right side of the carousel.

#amazingcarousel-CAROUSELID .amazingcarousel-prev {
  left: 0%;
  top: 50%;
  margin-left: -48px;
  margin-top: -16px;
}

#amazingcarousel-CAROUSELID .amazingcarousel-next {
  right: 0%;
  top: 50%;
  margin-right: -48px;
  margin-top: -16px;
}

And the following codes will place the two arrows on the top right of carousel:

#amazingcarousel-CAROUSELID .amazingcarousel-prev {
  right: 0%;
  top: 0%;
  margin-right: 32px;
  margin-top: -16px;
}

#amazingcarousel-CAROUSELID .amazingcarousel-next {
  right: 0%;
  top: 0%;
  margin-right: 0px;
  margin-top: -16px;
}

2. Customise the position of navigation bullets

You can customise the navigation bullets in Skins dialog, Navigation tab.

The HTML structure of navigation bullets is as following:

<div class="amazingcarousel-nav">
  <div class="amazingcarousel-bullet-wrapper">
    <div class="amazingcarousel-bullet-list">
      <div class="amazingcarousel-bullet-0"></div>
      <div class="amazingcarousel-bullet-1"></div>
    </div>
  </div>
</div>

The following CSS codes will place the bullets under the carousel:

#amazingcarousel-CAROUSELID .amazingcarousel-nav {
  position: absolute;
  width: 100%;
  top: 100%;
}

#amazingcarousel-CAROUSELID .amazingcarousel-bullet-wrapper {
  margin: 4px auto;
}

You can also add media query CSS codes which can define a different style for mobile devices. For example, the following codes will hide the navigation bullets on mobile devices:

@media (max-width: 600px) {
  #amazingcarousel-CAROUSELID .amazingcarousel-nav {
    display: none;
  }
}

3. Define style for the whole carousel

In Amazing Carousel, Skins dialog, Style tab, you can define the CSS style for the whole carousel.

The HTML structure of a carousel is as following:

<div id="amazingcarousel-1">
  <div class="amazingcarousel-list-container">
    <ul class="amazingcarousel-list">
      <li class="amazingcarousel-item"></li>
      <li class="amazingcarousel-item"></li>
      <li class="amazingcarousel-item"></li>
      <div style="clear:both;"></div>
    </ul>
  </div>
  <div class="amazingcarousel-prev"></div>
  <div class="amazingcarousel-next"></div>
  <div class="amazingcarousel-nav"></div>
</div>

The following CSS codes will add necessary padding to the carousel.

#amazingcarousel-container-CAROUSELID {
  padding: 32px 48px;
}

#amazingcarousel-CAROUSELID .amazingcarousel-list-container {
  padding: 16px 0;
}

4. Customise the style of each carousel item

You can define the style of each item at Skins dialog, Item style tab. The HTML structure of each carousel item is as following:

<li class="amazingcarousel-item">
  <div class="amazingcarousel-item-container">
    <div class="amazingcarousel-image"></div>
    <div class="amazingcarousel-title"></div>
    <div class="amazingcarousel-description"></div>
  </div>
</li>

The following CSS codes will define the alignment property and add necessary padding the each item:

#amazingcarousel-CAROUSELID .amazingcarousel-item-container {
  text-align: center;
  padding: 4px;
}