# Block #4 - Hero Slider #2

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

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FncWEoY4oNpgphmIzFyNO%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>
  {% 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>
  {% 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>
  {% endtab %}
  {% endtabs %}

## Available options

* Full-width container *(Full width: 100%, Standard: max-width: 1200px )*
* [Additional Class Name *(For developers)*](https://rosea.gitbook.io/monocolor/demo-content/front-page-blocks/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)