Skip to content

Instantly share code, notes, and snippets.

@jorgejr568

jorgejr568/owl-slider.html

Created January 16, 2019 13:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jorgejr568/0118bf01fafc59e5d03135ae66932199 to your computer and use it in GitHub Desktop.
Save jorgejr568/0118bf01fafc59e5d03135ae66932199 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
owl-slider.html
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<section id="slider">
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
dots: false,
center: true,
autoplay: true,
autoplayTimeout:5000,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
</script>
<style>
#slider{
display: block;
width: 50%;
margin: 0;
padding: 0;
box-sizing: border-box;
float: right;
}
.item{
width: 100%;
height: 400px;
background-color: rgb(16, 202, 202);
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment