Hero Slider

KartPro theme comes with inbuilt slider. No additional module is required for this.

Frequently Asked Question

Can I create more than one slider?

Yes

Can I create slider for inner pages?

Yes

Can I display slider on multiple pages?

Yes

Can I create multiple types of slider?

Yes

Does the slider support Drupal multilingual?

Yes

How to create slider

Step #1: Navigate to:

Administration > Content > Block

example.com/admin/content/block

Step #2: Create a new block

Click Add content block button. And use your slider code to create a new block. Use Full HTML text format.

Step #3: Navigate to:

Home > Administration > Structure > Block layout

example.com/admin/structure/block

Step #4: Place block

Place your new block in Slider region. Uncheck the option Display title. Under Visibility section, list the pages where you want to display the slider.

Troubleshooting

Text and Images are not updated.
Clear Drupal cache after creating slider.

example.com/admin/config/development/performance

Sample Slider Code

<div class="slider-container">
  <div class="slider-section slider-section-left">
    <div class="slider">
      <div class="slider-item">
        <div class="slider-image">
          <img src="/themes/contrib/kart/images/demo/slider/slider1.jpg" alt="banner" />
        </div><!-- /slider-image -->
        <div class="slider-text">
          <div class="width50">
            <h2>Solid Wood Dinning Table</h2>
            <p>Six Seater Dinning Table with 6 Cushioned Chairs for Home</p>
            <div><a href="#" class="button">shop now</a></div>          
          </div>
        </div><!-- /slider-text -->
      </div><!-- /slider-item -->
      <div class="slider-item">
        <div class="slider-image">
          <img src="/themes/contrib/kart/images/demo/slider/slider2.jpg" alt="banner" />
        </div><!-- /slider-image -->
        <div class="slider-text">
          <div class="width50">
            <h2>Natural Garden Table</h2>
            <p>Natural Foldable Table for Poolside, Garden, Living Room, Bedroom, Small Spaces</p>
            <div><a href="#" class="button">shop now</a></div>          
          </div>
        </div><!-- /slider-text -->
      </div><!-- /slider-item -->
      <div class="slider-item">
        <div class="slider-image">
          <img src="/themes/contrib/kart/images/demo/slider/slider3.jpg" alt="banner" />
        </div><!-- /slider-image -->
        <div class="slider-text">
          <div class="width50">
            <h2>Modern Wood Sofa Set</h2>
            <p>Modern special crafted Designs Sofa Set Furniture for Living Room</p>
            <div><a href="#" class="button">shop now</a></div>         
          </div>
        </div><!-- /slider-text -->
      </div><!-- /slider-item -->
    </div>
  </div>
  <div class="slider-section slider-section-right"> 
    <div class="banner">
      <div class="banner-image"><img src="/themes/contrib/kart/images/demo/banner/main-banner1.jpg" alt="banner" /></div>
      <div class="banner-text">
        <div class="width60">
          <h3>Learing Toys For Kids</h3>
          <div><a class="button" href="#">Shop Now</a></div>
        </div>        
      </div>
    </div>
    <div class="banner">
      <div class="banner-image"><img src="/themes/contrib/kart/images/demo/banner/main-banner2.jpg" alt="banner" /></div>
      <div class="banner-text">
        <div class="width60">
          <h3>Everyday Fashion For Kids</h3>
          <div><a class="button" href="#">Shop Now</a></div>
        </div>
      </div>
    </div>
  </div>
</div>