How to change Slider Content

Slick SLideris being used for slider and it’s easy to change images,contents.

1. Basic Markup for slider

<!-- slider -->
<section>
  <div class="hero-slider">
    
    <!-- slider item -->
    <div class="hero-slider-item bg-cover hero-section" style="background: url(images/slider/banner.jpg); ">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".1">
            <span class="letter-spacing text-white">We are here to</span>
            <h1 class="mb-3 text-capitalize">Planning Business</h1>
            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia numquam, odit alias veritatis adipisci. Ea unde, facere quasi officia iste minima non molestias incidunt. Iure aliquid asperiores consequuntur. Ad.</p>
            <a href="room-grid.html" class="btn btn-main" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".4">more details</a>
          </div>
        </div>
      </div>
    </div>
    <!-- slider item -->
    <div class="hero-slider-item bg-cover hero-section" style="background: url(images/slider/slider-img2.jpg); ">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".1">
            <span class="letter-spacing text-white">We are here to</span>
            <h1 class="mb-3 text-capitalize">Make journey</h1>
            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nihil iste adipisci ipsam labore neque voluptatibus est. Animi earum, nihil reprehenderit, adipisci similique impedit accusamus sapiente quo, quos, qui eius.</p>
            <a href="room-grid.html" class="btn btn-main" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".4">more details</a>
          </div>
        </div>
      </div>
    </div>
    <!-- slider item -->
    <div class="hero-slider-item bg-cover hero-section" style="background: url(images/slider/banner2.jpg); ">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".1">
             <span class="letter-spacing text-white">We provide</span>
            <h1 class="mb-3 text-capitalize">Great Service</h1>
            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, excepturi voluptate enim voluptatibus deserunt veritatis, fugiat laborum architecto, blanditiis suscipit provident a iste consequuntur dolore facilis. Enim vero cum repellendus!</p>
            <a href="room-grid.html" class="btn btn-main" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".4">more details</a>
          </div>
        </div>
      </div>
    </div>
    <!-- slider item -->
    <div class="hero-slider-item bg-cover hero-section" style="background: url(images/slider/banner3.jpg); ">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center" data-duration-in=".3" data-animation-in="fadeInRight" data-delay-in=".1">
             <span class="letter-spacing text-white">We give high</span>
            <h1 class="mb-3 text-capitalize">quality Service</h1>
            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum nemo dolore rem error quibusdam ad quidem itaque officia obcaecati accusantium quos repellendus, dolor. Modi, doloremque odit eaque minus accusantium. Hic.</p>
            <a href="room-grid.html" class="btn btn-main" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".4">more details</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /slider -->

Change image and slider contents from style.

Want to know more about Slick Slider follow this link - 
http://kenwheeler.github.io/slick/

Was this article helpful to you? Yes No

How can we help?