Slider Captions

Slider Captions

Slider captions are the headline and text overlays placed on top of Canvas slides. They use the .slider-caption wrapper and animate their contents into view with data-animate classes, so each slide can reveal its text with a staggered entrance.

Structure

Place a .slider-caption inside a slide, wrapped in a .container for alignment. Add heading and paragraph elements, and give each a data-animate value (from the bundled animation set) to control its entrance. Use data-delay to stagger elements.

<div class="swiper-slide">
  <div class="container">
    <div class="slider-caption">
      <h2 data-animate="fadeInUp">Great Performance</h2>
      <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">
        You'll be surprised to see the Final Results of your Creation &amp; would crave for more.
      </p>
    </div>
  </div>
  <div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;"></div>
</div>

Setup

The caption markup works inside the Canvas slider out of the box, no separate init call is needed. Control the entrance of each caption element with:

• data-animate: the animation applied when the slide becomes active, for example fadeInUp, fadeInUpSmall, or bounceInLeft.
• data-delay: milliseconds to wait before animating, for example 200 or 400. Stagger elements by increasing the delay.

Captions also work in the FlexSlider variant using the .flex-caption class, which shares the same styling as .slider-caption.

Options

Caption appearance is driven by CSS custom properties (with sensible defaults set in sass/_variables.scss). Override them inline or in your own CSS, or change the SASS variables and recompile:

• --cnvs-slider-caption-width (default 550px): maximum caption width.
• --cnvs-slider-caption-font-size (default 1.375rem): heading size.
• --cnvs-slider-caption-font-weight (default 300): heading weight.
• --cnvs-slider-caption-font-color: text color.
• --cnvs-slider-caption-p-size (default 1.5rem): paragraph size.
• --cnvs-slider-caption-offset (default 50px): vertical offset used during the reveal.
• --cnvs-slider-caption-transition (default top 0.3s ease): caption transition.
• --cnvs-slider-caption-bg-light / --cnvs-slider-caption-bg-dark: background tints for light and dark captions.
• --cnvs-slider-caption-bg-radius / --cnvs-slider-caption-bg-padding: background box radius and padding.

The matching SASS variables live in sass/_variables.scss:

$slider-caption-width       : 550px;
$slider-caption-font-size   : 1.375rem;
$slider-caption-font-weight : 300;
$slider-caption-p-size      : 1.5rem;
$slider-caption-offset      : 50px;

Tips

• Stagger entrances by giving each caption element a larger data-delay (for example heading 0, paragraph 200, button 400) so they animate in sequence.
• Use responsive utilities like .d-none .d-sm-block on secondary text to hide it on the smallest screens where space is tight.
• To retheme every caption at once, edit the $slider-caption-* variables in sass/_variables.scss and recompile style.css.