Saar 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 display default slider

You can enable or disable default slider from theme settings.

image

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 Hero Header 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

Default Slider Code

<div class="slider">
  <div class="slider-text-container">
    <div class="splide" aria-label="hero slider">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
            <div class="slider-text">
              <h2>Launch Faster, Perform Better With Optimised Cloud Hosting</h2>
              <p>Our cloud platform runs like a well-tuned engine, ready to carry your website or app as far as your ambition stretches.</p>
              <p>
                <a href="#" class="button">Get Started</a>
                <a href="#" class="button-outline">Read more</a>
              </p>
              <ul class="list-check flex gap">
                <li>7-Day Free Trial</li>
                <li>Cancel Anytime</li>
                <li>No Credit Card</li>
              </ul>
            </div> <!-- /slider-text -->
          </li>

          <li class="splide__slide">
            <div class="slider-text">
              <h2>Protect Your Entire Network With Enterprise Level Security</h2>
              <p>Protect your business with advanced, always-on network security. Stay compliant, stay guarded, stay in control.</p>
              <p>
                <a href="#" class="button">Get Started</a>
                <a href="#" class="button-outline">Read more</a>
              </p>
              <ul class="list-check flex gap">
                <li>7-Day Free Trial</li>
                <li>Cancel Anytime</li>
                <li>No Credit Card</li>
              </ul>
            </div> <!-- /slider-text -->
          </li>

          <li class="splide__slide">
            <div class="slider-text">
              <h2>Empower Business with enterprise grade DevOps strategy and automation</h2>
              <p>Empower your engineering teams with automation and precision. Build, test, and ship with confidence and clarity.</p>
              <p>
                <a href="#" class="button">Get Started</a>
                <a href="#" class="button-outline">Read more</a>
              </p>
              <ul class="list-check flex gap">
                <li>7-Day Free Trial</li>
                <li>Cancel Anytime</li>
                <li>No Credit Card</li>
              </ul>
            </div> <!-- /slider-text -->
          </li>
        </ul>
      </div>
    </div>
  </div> <!-- /slider-text-container -->

  <div class="slider-img">
    <img src="/themes/saar/images/demo/slider/slider.svg" alt="hero slider" />
  </div> <!-- /slider-img -->
</div> <!-- /slider -->