Usage
<section class="section-slider">
<div class="background-slider">
<div class="active" style="background-image:url(image.jpg)"></div>
<div style="background-image:url(image.jpg)"></div>
<div style="background-image:url(image.jpg)"></div>
</div>
<div class="container">
</div>
</section>
Settings
| Name | Type | Description |
|---|---|---|
| Interval | Attribute |
Add the attribute data-interval="123" to the component to change the interval in milliseconds between each slide.
Set to 0 to disable the slideshow. Default 3000 ms.
|
| Parallax | Attribute |
Add the attribute data-slider-parallax="true" to add to the background images a parallax effect.
|
| Full screen | CSS |
Add the class full-screen to the section to set the height of the section to full screen.
Use the attribute data-offset="123" to adjust the header height.
Try it
Full screen
|
| Full width | CSS |
Add the class section-full-width to make the section full width.Add the class section-full-width-left to make the section full width only on left.Add the class section-full-width-right to make the section full width only on right.Full width right and left sections require two col-lg-6 as main content.
Try it
Full width
|
| Center alignment | CSS |
Add the class section-center to the section to vertically center the content inside it.
Try it
Align center
|
| No padding | CSS |
Add the class no-padding-y to remove the vertical padding, the class no-padding-x to remove the horizontal padding
and the class no-padding to remove both padding. Add the class no-padding-top or no-padding-bottom to remove only the top or bottom padding.
|
| Code location | Information |
The sections must be placed inside the <main> </main> code block.
For more details visit the getting started page.
|