Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris.

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.