---
description: 'Hero Slider #4'
---

# Block #4 - Hero Slider #2

Script: [Swiper](https://swiperjs.com/). MIT Licensed, v7.0.8 released on October 4, 2021

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FTSXO5KMGG742YOsTneoS%2Fblock1.jpg?alt=media&#x26;token=ba994a71-76ae-493c-a432-4d5a14ee0996" alt=""><figcaption></figcaption></figure>

## Demo Settings

* Full-width container: **Off**
* Content Wrapper Alignment: **Left**
* Slider interval: **7000**
* Slides: **3**

{% tabs %}
{% tab title="Slide #1" %}
**Slide Heading:** Meet a new Moodle Theme

**Slide Caption:** _(Switch to the HTML/Code View)_

{% code title="HTML Code" overflow="wrap" lineNumbers="true" %}
```html
<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
```
{% endcode %}

{% code title="More options" overflow="wrap" %}
```shortcode
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin
```
{% endcode %}



**Slide Image:**

* Size: **1200px x 600px**
* [Get the demo Image](https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/block1slideimg1/1671077569/1200x600-hero-5.jpg)
* Credits Unsplash: [https://unsplash.com/photos/Vc2dD4l57og](https://unsplash.com/photos/Vc2dD4l57og)
{% endtab %}

{% tab title="Slide #2" %}
**Slide Heading:** Works with Moodle 4.x

**Slide Caption:** _(Switch to the HTML/Code View)_

{% code title="HTML Code" overflow="wrap" lineNumbers="true" %}
```html
<p class="text-size-lg">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
```
{% endcode %}

{% code title="More options" overflow="wrap" %}
```shortcode
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin
```
{% endcode %}



**Slide Image:**

* Size: **1200px x 600px**
* [Get the demo Image](https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/block1slideimg1/1671077569/1200x600-hero-5.jpg)
* Credits Unsplash: [https://unsplash.com/photos/Z4T5tts0wLM](https://unsplash.com/photos/Z4T5tts0wLM)
{% endtab %}

{% tab title="Slide #3" %}
**Slide Heading:** Just wow!

**Slide Caption:** _(Switch to the HTML/Code View)_

{% code title="HTML Code" overflow="wrap" lineNumbers="true" %}
```html
<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
```
{% endcode %}

{% code title="More options" overflow="wrap" %}
```shortcode
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin
```
{% endcode %}



**Slide Image:**

* Size: **1200px x 600px**
* [Get the demo Image](https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/block1slideimg2/1671077569/1200x600-2.jpg)
* Credits Unsplash: [https://unsplash.com/photos/rReG42Hkqo4](https://unsplash.com/photos/rReG42Hkqo4)
{% endtab %}
{% endtabs %}

## Available options

* Full-width container _(Full width: 100%, Standard: max-width: 1200px )_
* [Additional Class Name _(For developers)_](../advanced-options/additional-classes)
* Block Intro Content _(HTML Content before the block)_
* Content Wrapper Alignment _(Left, Middle, Right)_
*   Heading Size _(Normal, Large, Extra Large)_

    ```css
    Normal: 40px , Large: 60px , Extra Large: 80px
    ```
*   Heading Color _(Black, White, Gradient)_

    ```php
    Gradient: $primary-color-200, $primary-color-600

    // CSS class
    .rui-text--gradient
    ```
* Heading Font Weight _(Normal, Medium, Bold)_
* Show Colorized Content Wrapper (On/Off)
  * Content Wrapper Color (HEX)
* Slider interval
* Slider Count (up to 7 slides)
