Carousels Last updated: 01.07.2020

Carousel 1

  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

note: if you wish to have multiple cards (carousel items), simply copy the anchor tag (<a href="#">…</a>).

note: Images should be roughly 400 x 300 or larger. Some images may not be suitable with text overlayed.

Each card's image is set inline on that card as background-image:

Output HTML:
                    <!-- Carousel 001 -->
<div class="tl-carousel-001" style="background: url('/wiki/assets/images/pattern.png');">
  <div class="owl-carousel owl-theme">
    <a href="#" class="item card" style="background-image: url('/wiki/assets/images/types-of-beauty-schools-cosmetology.jpg');">
      <div class="card-body">
        <h4 class="card-title">Slide 001</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        <button class="btn btn-primary btn-md btn-rounded">More Info<span class="chevron-arrow-right"></span></button>
      </div>
    </a>
    <a href="#" class="item card" style="background-image: url('/wiki/assets/images/types-of-beauty-schools-esthetics.jpg');">
      <div class="card-body">
        <h4 class="card-title">Slide 002</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        <button class="btn btn-primary btn-md btn-rounded">More Info<span class="chevron-arrow-right"></span></button>
      </div>
    </a>
    <a href="#" class="item card" style="background-image: url('/wiki/assets/images/types-of-beauty-schools-nail-school.jpg');">
      <div class="card-body">
        <h4 class="card-title">Slide 003</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        <button class="btn btn-primary btn-md btn-rounded">More Info<span class="chevron-arrow-right"></span></button>
      </div>
    </a>
    <a href="#" class="item card" style="background-image: url('/wiki/assets/images/types-of-beauty-schools-nail-school.jpg');">
      <div class="card-body">
        <h4 class="card-title">Slide 004</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        <button class="btn btn-primary btn-md btn-rounded">More Info<span class="chevron-arrow-right"></span></button>
      </div>
    </a>
  </div>
</div>
                  
&lt;!-- Carousel 001 --&gt; &lt;div class=&quot;tl-carousel-001&quot; style=&quot;background: url('/wiki/assets/images/pattern.png');&quot;&gt; &lt;div class=&quot;owl-carousel owl-theme&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;item card&quot; style=&quot;background-image: url('/wiki/assets/images/types-of-beauty-schools-cosmetology.jpg');&quot;&gt; &lt;div class=&quot;card-body&quot;&gt; &lt;h4 class=&quot;card-title&quot;&gt;Slide 001&lt;/h4&gt; &lt;p class=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;span class=&quot;chevron-arrow-right&quot;&gt;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;item card&quot; style=&quot;background-image: url('/wiki/assets/images/types-of-beauty-schools-esthetics.jpg');&quot;&gt; &lt;div class=&quot;card-body&quot;&gt; &lt;h4 class=&quot;card-title&quot;&gt;Slide 002&lt;/h4&gt; &lt;p class=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;span class=&quot;chevron-arrow-right&quot;&gt;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;item card&quot; style=&quot;background-image: url('/wiki/assets/images/types-of-beauty-schools-nail-school.jpg');&quot;&gt; &lt;div class=&quot;card-body&quot;&gt; &lt;h4 class=&quot;card-title&quot;&gt;Slide 003&lt;/h4&gt; &lt;p class=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;span class=&quot;chevron-arrow-right&quot;&gt;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;item card&quot; style=&quot;background-image: url('/wiki/assets/images/types-of-beauty-schools-nail-school.jpg');&quot;&gt; &lt;div class=&quot;card-body&quot;&gt; &lt;h4 class=&quot;card-title&quot;&gt;Slide 004&lt;/h4&gt; &lt;p class=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;span class=&quot;chevron-arrow-right&quot;&gt;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;