Simple Indicators

If you want to show simple indicators then first use ( bs4-indicators-simple ) class with the ( bs4-carousel ) class.

    <!-- Simple Indicators Example -->

    <!-- Indicators -->
    <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-simple">

Simple Indicators Types

Class	Class	Class	Class	Class
carousel-indicators-bs3	carousel-indicators-bs4	carousel-indicators-fill	carousel-indicators-ip	carousel-indicators-border

    <!-- Simple Indicators -->
	
    <!-- Indicators -->
    <ol class="carousel-indicators carousel-indicators-ip">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

Simple Indicators Positioning

Class	Class	Class	Class
carousel-indicators-bottom-center	carousel-indicators-bottom-left	carousel-indicators-bottom-right	carousel-indicators-top-center
carousel-indicators-top-left	carousel-indicators-top-right	carousel-indicators-left-center	carousel-indicators-left-top
carousel-indicators-right-center	carousel-indicators-right-top

    <!-- Simple Indicators -->
	
    <!-- Indicators -->
    <ol class="carousel-indicators carousel-indicators-ip carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

Simple Indicators Color

Attribute	Result
data-color	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

    <!-- Simple Indicators -->
	
    <!-- Indicators -->
    <ol data-color="#ffffff" class="carousel-indicators carousel-indicators-ip carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

Simple Indicators <ol> Background Color

Attribute	Result
data-bgcolor	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

    <!-- Simple Indicators -->
	
    <!-- Indicators -->
    <ol data-color="#ffffff" data-bgcolor="transparent" class="carousel-indicators carousel-indicators-ip carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

Thumbnails With Absolute Position

If you want to show thumbnails those are overlapping the carousel then first use ( bs4-indicators-thumb ) class with the ( bs4-carousel ) class.

    <!-- Simple Indicators Example -->

    <!-- Indicators -->
    <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb">

Thumbnails With Absolute Position Types

Class	Class	Class	Class	Class
carousel-thumb-border	carousel-thumb-border-bottom	carousel-thumb-border-top	carousel-thumb-border-left	carousel-thumb-border-right

    <!-- Thumbnails -->

    <ol class="carousel-indicators carousel-thumb-border">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Absolute Position's Positioning

Class	Class	Class	Class
carousel-indicators-bottom-center	carousel-indicators-bottom-left	carousel-indicators-bottom-right	carousel-indicators-top-center
carousel-indicators-top-left	carousel-indicators-top-right	carousel-indicators-left-center	carousel-indicators-left-top
carousel-indicators-right-center	carousel-indicators-right-top

    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Absolute Position Radius

Class
.carousel-thumb-radius

    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border carousel-thumb-radius carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Absolute Position Gray Scale Or Filter

Class
.carousel-thumb-gray-scale

    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border carousel-thumb-gray-scale carousel-thumb-radius carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Absolute Position Color

Attribute	Result
data-color	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

    <!-- Thumbnails -->
    <ol data-color="#ffffff" class="carousel-indicators carousel-thumb-border carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Absolute Position <ol> Background Color

Attribute	Result
data-bgcolor	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

    <!-- Thumbnails -->
    <ol data-color="#ffffff" data-bgcolor="transparent" class="carousel-indicators carousel-thumb-border carousel-indicators-bottom-center">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position

If you want to show thumbnails those are overlapping the carousel then first use ( bs4-indicators-thumb ) class with the ( bs4-carousel ) class.

    <!-- Carousel -->
    <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb">

Thumbnails With Relative Position Types

Class	Class	Class	Class	Class
carousel-thumb-border	carousel-thumb-border-bottom	carousel-thumb-border-top	carousel-thumb-border-left	carousel-thumb-border-right

    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position's Positioning

Attribute	Value	Result
data-thumb	top	This will show thumbnails on the Top side of the carousel
data-thumb	bottom	This will show thumbnails on the Bottom side of the carousel
data-thumb	left	This will show thumbnails on the Left side of the carousel
data-thumb	right	This will show thumbnails on the right side of the carousel

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb" data-thumb="bottom">
    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position Radius

Class
.carousel-thumb-radius

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb" data-thumb="bottom">
    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border carousel-thumb-radius">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position Gray Scale Or Filter

Class
.carousel-thumb-gray-scale

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb" data-thumb="bottom">
    <!-- Thumbnails -->
    <ol class="carousel-indicators carousel-thumb-border carousel-thumb-radius carousel-thumb-gray-scale">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position Color

Attribute	Result
data-color	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb" data-thumb="bottom">
    <!-- Thumbnails -->
    <ol data-color="#ffffff" class="carousel-indicators carousel-thumb-border carousel-thumb-radius carousel-thumb-gray-scale">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails With Relative Position <ol> Background Color

Attribute	Result
data-bgcolor	Use Any Type Of Value ( Hexadecimal\|RGB\|RGBA\|HSL\|HSLA\|Predefined/Cross-browser color names )

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-full-screen thumb_scroll_x bs4-indicators-thumb" data-thumb="bottom">
    <!-- Thumbnails -->
    <ol data-color="#ffffff" data-bgcolor="transparent" class="carousel-indicators carousel-thumb-border carousel-thumb-radius carousel-thumb-gray-scale">
      <li data-target="#myCarousel" data-slide-to="0">
          <img src="image-01.jpg" alt="image-01.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="1">
          <img src="image-02.jpg" alt="image-02.jpg" />
      </li>
      <li data-target="#myCarousel" data-slide-to="2">
          <img src="image-03.jpg" alt="image-03.jpg" />
      </li>
    </ol>

Thumbnails Overflow Scrolling

Class	Use
thumb_scroll_x	Only with those layouts those contain Horizontal Thumbnails
thumb_scroll_y	Only with those layouts those contain Vertical Thumbnails

  <!-- Thumbnails Overflow Scrolling Horizontally -->
  <div id="myCarousel" class="carousel slide thumb_scroll_x " data-interval="4000" data-pause="hover">

04 - Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes53@gmail.com