Slider

Zuvi theme comes with inbuilt slider powered by jQuery and CSS3. No additional module is required for this.

image

Frequently Asked Question

Can I create more than one slider?

Yes

Can I create slider in inner pages?

Yes

Can I create multiple types of slider?

Yes

Does the slider support Drupal multilingual?

Yes

How to change slider image

image

How to create slider

Step #1: Navigate to:

Administration arrow-icon Content arrow-icon Content blocks

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:

Administration arrow-icon Structure arrow-icon 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.

image

Slider Code

Each slide should be enclosed in <li> tag. Below code will create three slides.

<ul class="js-rotating">
  <li>This is FIRST slider text</li>
  <li>This is SECOND slider text</li>
  <li>This is THIRD slider text</li>
</ul>

How to add link button in slider

Just add link HTML code with button class. See below sample code:

<ul class="js-rotating">
<li>
  This is FIRST slider text
  <a class="button-link" href="http//example.com/abc">Get Started</a>
</li>

<li>
  This is SECOND slider text
  <a class="button-link" href="http//example.com/def">Get Started</a>
</li>

<li>
  This is THIRD slider text
  <a class="button-link" href="http//example.com/xyz">Get Started</a>
</li>
</ul>

Sample code

<ul class="js-rotating">
<li>
  <h1>Zuvi is <em>Multipurpose</em> Drupal theme</h1>
  <p>Zuvi Theme is packed full of all the amazing features and options for you to create a successful website</p>
  <a class="button-link" href="#">Get Started</a>
</li>
<li>
  <h1>Welcome To <em>Drupar</em> Design Studio</h1>
  <p>We present you material design. We put our hearts and soul into making every project.</p>
  <a class="button-link" href="#">Get Started</a>
</li>
<li>
  <h1>We Create <em>Awesome</em> Drupal Themes!</h1>
  <p>Our themes are of high quality, flexible and beautifully crafted that stand out of crowd.</p>
  <a class="button-link" href="#">Get Started</a>
</li>
</ul>