1. Home
  2. Docs
  3. Eden
  4. How to change Slider Content

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?