Adding Animation to your Hero Slider

In Part III of our Slick Slider Series, we will show you how to add animation to your Hero Slider using animate.css by Daniel Eden.

In Part III of our Slick Slider Series, we will show you how to add animation to your Hero Slider using animate.css by Daniel Eden. CSS has become more powerful than ever and the plugins that have been created as a result enable you to add interactivity to your website like never before. This article will show you how to add animation to your Hero Slider using animate.css

If you missed Part I of our Slick Slider Series on adding a hero slider to your website you can find it here.

Below is the HTML, CSS and JavaScript required to animate your hero slides.

Demo on JSFiddle Download from GitHub

Step 1 - Add the HTML below to where you'd like your animated hero slider to populate

<div class="ct-header ct-header--slider ct-slick-custom-dots" id="home">
   <div class="ct-slick-homepage" data-arrows="true" data-autoplay="true">
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide1.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Big Data. Realtime Insight.</h1>
                        <p class="animated">Leverage your data and improve marketing and sales ROI.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide2.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Disrupting Industries with Grace</h1>
                        <p class="animated">WebCorpCo is at the forefront of digital marketing, content management, automated marketing, and more.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide3.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Moving Business Forward</h1>
                        <p class="animated">Learn how WebCorpCo can take your business to the next level.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- .ct-slick-homepage -->
</div>
<!-- .ct-header -->

Step 2 - Add the CSS below to the main stylesheet of your website

/* Slider */
.slick-slider
{
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
}

.slick-list
{
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
}
.slick-list:focus
{
        outline: none;
}
.slick-list.dragging
{
        cursor: pointer;
        cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

.slick-track
{
        position: relative;
        top: 0;
        left: 0;
        display: block;
}
.slick-track:before,
.slick-track:after
{
        display: table;
        content: '';
}
.slick-track:after
{
        clear: both;
}
.slick-loading .slick-track
{
        visibility: hidden;
}

.slick-slide
{
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
}
[dir='rtl'] .slick-slide
{
        float: right;
}
.slick-slide img
{
        display: block;
}
.slick-slide.slick-loading img
{
        display: none;
}
.slick-slide.dragging img
{
        pointer-events: none;
}
.slick-initialized .slick-slide
{
        display: block;
}
.slick-loading .slick-slide
{
        visibility: hidden;
}
.slick-vertical .slick-slide
{
        display: block;
        height: auto;
        border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
        display: none;
}
.slick-prev,
.slick-next {
        position: absolute;
        display: block;
        width: 60px;
        height: 100px;
        cursor: pointer;
        background: transparent;
        top: 50%;
        margin-top: -45px;
        font-size: 0;
        border: none;
        z-index: 2;
}
.slick-prev:before,
.slick-next:before,
.slick-prev:after,
.slick-next:after {
        content: '';
        position: absolute;
        background: #fff;
        height: 2px;
        width: 50px;
        top: 50%;
        left: 5px;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
}
.slick-prev:before,
.slick-next:before {
        margin-top: -22px;
}
.slick-prev:after,
.slick-next:after {
        margin-top: 22px;
        margin-top: 2.2rem;
}
.slick-prev:hover:before,
.slick-next:hover:before {
        margin-top: -18px;
        margin-top: -1.8rem;
}
.slick-prev:hover:after,
.slick-next:hover:after {
        margin-top: 18px;
        margin-top: 1.8rem;
}
.slick-prev {
        left: -7px;
        left: -0.7rem;
}
.slick-prev:before {
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.slick-prev:after {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.slick-prev:hover:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.slick-prev:hover:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.slick-next {
        right: -7px;
        right: -0.7rem;
}
.slick-next:before {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.slick-next:after {
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.slick-next:hover:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.slick-next:hover:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev,
.ct-slick-arrows--type2 .slick-next {
        opacity: 0.85;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
        -webkit-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
        background-color: #fff;
        height: 15px;
        height: 1.5rem;
        width: 70px;
        width: 7rem;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before {
        margin-top: -20px;
        margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
        margin-top: 20px;
        margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:before,
.ct-slick-arrows--type2 .slick-next:hover:before {
        margin-top: -20px;
        margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:after,
.ct-slick-arrows--type2 .slick-next:hover:after {
        margin-top: 20px;
        margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:active,
.ct-slick-arrows--type2 .slick-next:hover:active {
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.ct-slick-arrows--type2 .slick-prev {
        left: 10px;
        left: 1rem;
}
.ct-slick-arrows--type2 .slick-prev:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:before {
        margin-top: -27px;
        margin-top: -2.7rem;
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:after {
        margin-top: 27px;
        margin-top: 2.7rem;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next {
        right: 10px;
        right: 1rem;
}
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-next:after {
        left: auto;
        right: 0;
}
.ct-slick-arrows--type2 .slick-next:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-next:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-next:hover:before {
        margin-top: -27px;
        margin-top: -2.7rem;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next:hover:after {
        margin-top: 27px;
        margin-top: 2.7rem;
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
#home.ct-header.ct-header--slider {
        background-size: cover;
}
.ct-header .ct-slick {
        margin-bottom: 0;
}
.slick-initialized .slick-slide {
        display: block;
}
.ct-u-display-tablex {
        display: table;
        width: 100%;
        height: 600px;
}
.ct-u-display-tablex > .inner {
        display: table-cell;
        width: 100%;
        vertical-align: middle;
}
.ct-header h1.big {
        font-size: 6.7rem;
        line-height: 1;
        color: #fff;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        padding-top: 50px;
}
.ct-header p {
        font-size: 2.3rem;
        line-height: 1.1;
        margin: 30px 0 40px;
        color: #fff;
}
.btn {
        text-transform: uppercase;
    font-weight: bold;
    padding: 15px 26px;
    padding: 1.5rem 2.6rem;
    color: #fff;
    border-radius: 0;
    border: none;
    font-size: 22px;
    font-size: 2.2rem;
}
* {
outline: none !important;
}
.btn:hover,
.btn:focus,
.btn:active {
        color: #fff;
}
.btn-transparent {
        background-color: transparent;
        border: 3px solid #fff;
}
.ct-slick .slick-track,
.ct-slick .slick-list,
.ct-slick .item,
.ct-slick .slick-item {
        min-height: inherit;
}
.ct-slick .item {
        background-size: cover;
}
.slick-list {
        height: 600px;
}

/* Transitions */
.activate {
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        opacity: 1;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1 * 100);
        filter: alpha(opacity=1 * 100);
}
.animated {
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        opacity: 0;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 * 100);
        filter: alpha(opacity=0 * 100);
}

Step 3 - Add the JavaScript below to the page where your hero slider will live

$(document).ready(function(){                   
  $('.ct-slick-homepage').on('init', function(event, slick){
    $('.animated').addClass('activate fadeInUp');
  });           

  $('.ct-slick-homepage').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
  });                   

  $('.ct-slick-homepage').on('afterChange', function(event, slick, currentSlide) {
    $('.animated').removeClass('off');
    $('.animated').addClass('activate fadeInUp');
  });           

  $('.ct-slick-homepage').on('beforeChange', function(event, slick, currentSlide) {
    $('.animated').removeClass('activate fadeInUp');
    $('.animated').addClass('off');
  });
});

 $(document).ready(function() {
 if ($('[data-background]').length > 0) {
      $('[data-background]').each(function() {
        var $background, $backgroundmobile, $this;
        $this = $(this);
        $background = $(this).attr('data-background');
        $backgroundmobile = $(this).attr('data-background-mobile');
        if ($this.attr('data-background').substr(0, 1) === '#') {
          return $this.css('background-color', $background);
        } else if ($this.attr('data-background-mobile') && device.mobile()) {
          return $this.css('background-image', 'url(' + $backgroundmobile + ')');
        } else {
          return $this.css('background-image', 'url(' + $background + ')');
        }
      });
    }
  });

Step 4 - Add the includes below to the page where your hero slider will live

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Demo on JSFiddle Download from GitHub

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Adding Animation to your Hero Slider

Step 1 - Add the HTML below to where you'd like your animated hero slider to populate

Step 2 - Add the CSS below to the main stylesheet of your website

Step 3 - Add the JavaScript below to the page where your hero slider will live

Step 4 - Add the includes below to the page where your hero slider will live

Product

Solutions

Resources

About

Thank you for subscribing!

Features

Solutions

Resources

About