OWL Carousel
Owl Carousel v2.2.1
src/scss/components/_carousel.scss

Owl Slider

With animation (animate.css)

<div class="slider slider-home owl-carousel" data-nav="true" data-pag="true">

	<div class="item cover" style="background-image: url(design/images/banner.jpg)">
		<div class="container text-center white">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="text-shadow">
						<div class="mb2 animated" data-animated="fadeInDown">
							<span class="both-lines h3 italic">Welcome!</span>
						</div>
						<div class="animated" data-animated="fadeInUp">
							<div class="huge mb1">Lorem ipsum dolor</div>
							<p class="h3 white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="item cover" style="background-image: url(design/images/banner.jpg)">
		<div class="container text-center white">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="text-shadow">
						<div class="mb2 animated" data-animated="fadeIn">
							<span class="both-lines h3 italic">Welcome!</span>
						</div>
						
						<div class="animated" data-animated="fadeInRight">
							<div class="huge mb1">Lorem ipsum dolor</div>
							<p class="h3 white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
Welcome!
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Welcome!
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Owl Carousel

<div class="carousel nav-dark owl-carousel" data-pag="true" data-nav="true" data-xs="1" data-sm="2" data-md="4" data-lg="5">
	<!-- repeat -->
	<div class="item box">
		<div class="image">
			<img src="design/images/400x225.jpg" alt="">
		</div>
	</div>
	<!-- end repeat -->
</div>

Slide #1

Slide #2

Slide #3

Slide #4

Slide #5

Slide #6

Slide #7

Slide #8

Slide #9

Slide #10

Required class names: .carousel.owl-carousel

Invert colors for nav elements: .nav-dark

Required class for item .item

Options (default value is setted)
data-loop="false" loop slides
data-nav="true" Show navigation arrows
data-pag="false" Show pagination dots
data-autoplay="false" Autoplay
data-page="false" Slide by page (if true) or one item
data-margin="0" Margin for items
data-speed="5000" Slide interval (ms)
.aside-nav

Slide #1

Slide #2

Slide #3

Slide #4

Slide #5

Slide #6

Slide #7

Slide #8

Slide #9

Slide #10

.bottom-nav

Custom navigation

Prev Next 
<div class="owl-custom-nav" data-target="#custom-nav-carousel">
    <a href="#" class="btn btn-primary owl-prev">Prev</a>
    <a href="#" class="btn btn-primary owl-next">Next</a>
</div>