Carousels Last updated: 01.07.2020

Carousel 1

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • 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:

Example:

Slide 001

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Slide 002

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Slide 003

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Slide 004

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
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;