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

image

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="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="slider-text">
          <h2>Award Winning Digital Marketing Agency</h2>
          <p>Nava Theme is packed full of all the amazing features and options for you to create a successful website</p>
          <div><a class="button" href="#">Get Started</a> <a class="button-outline" href="#">Read More</a></div>
        </div>
        <div class="slider-img">
          <img class="round" src="/themes/contrib/nava/images/demo/slider/slider1.jpg" alt="Multipurpose Drupal theme" />
        </div>
      </li>
      <li class="splide__slide">
        <div class="slider-text">
          <h2>Manage Your Business Easily</h2>
          <p>We present you material design. We put our hearts and soul into making every project.</p>
        <div><a class="button" href="#">Get Started</a> <a class="button-outline" href="#">Read More</a></div>
        </div>
        <div class="slider-img">
          <img class="round" src="/themes/contrib/nava/images/demo/slider/slider2.jpg" alt="Drupar Design Studio" />
        </div>
      </li>
      <li class="splide__slide">
        <div class="slider-text">
          <h2>The Future of Business is Complete Digital</h2>
          <p>Our themes are of high quality, flexible and beautifully crafted that stand out of crowd.</p>
        <div><a class="button" href="#">Get Started</a> <a class="button-outline" href="#">Read More</a></div>
        </div>
        <div class="slider-img">
          <img class="round" src="/themes/contrib/nava/images/demo/slider/slider3.jpg" alt="Awesome Drupal Theme" />
        </div>
      </li>
    </ul>
  </div>
</div>