Created
April 27, 2017 18:51
-
-
Save shehabkhan013/05da04043a5a123a0e4c97fff0874dfc to your computer and use it in GitHub Desktop.
Owl-Carousel With Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- slider area start --> | |
<div class="home-slider owl-carousel"> | |
<div class="single-slider center img-bg slide-bg-1"> | |
<div class="slider-text"> | |
<div class="container"> | |
<h1>welcome to our beauty shop</h1> | |
<p>it’s make you beauty</p> | |
<a href="#" class="btn btn-custom">explore now</a> | |
</div> | |
</div> | |
</div> | |
<div class="single-slider left img-bg slide-bg-2"> | |
<div class="slider-text"> | |
<div class="container"> | |
<h1>welcome to our beauty shop</h1> | |
<p>it’s make you beauty</p> | |
<a href="#" class="btn btn-custom">explore now</a> | |
</div> | |
</div> | |
</div> | |
<div class="single-slider right img-bg slide-bg-3"> | |
<div class="slider-text"> | |
<div class="container"> | |
<h1>welcome to our beauty shop</h1> | |
<p>it’s make you beauty</p> | |
<a href="#" class="btn btn-custom">explore now</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- slider area End --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//home page slider | |
$(".home-slider").owlCarousel({ | |
items: 1, | |
nav: true, | |
dots: false, | |
autoplay: true, | |
loop: true, | |
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], | |
mouseDrag: false, | |
touchDrag: false, | |
}); | |
$(".home-slider").on("translate.owl.carousel", function() { | |
$(".slider-text h1, .slider-text p").removeClass("animated fadeInUp").css("opacity", "0"); | |
$(".slider-text .btn.btn-custom").removeClass("animated fadeInDown").css("opacity", "0"); | |
}); | |
$(".home-slider").on("translated.owl.carousel", function() { | |
$(".slider-text h1, .slider-text p").addClass("animated fadeInUp").css("opacity", "1"); | |
$(".slider-text .btn.btn-custom").addClass("animated fadeInDown").css("opacity", "1"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Slider area CSS */ | |
.home-slider.owl-carousel.owl-loaded { | |
overflow: hidden; | |
} | |
.single-slider { | |
min-height: 100vh; | |
position: relative; | |
} | |
.single-slider:before { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background: #141313; | |
content: ""; | |
opacity: .5; | |
} | |
.home-slider .center { | |
text-align: center; | |
} | |
.home-slider .left { | |
text-align: left: ; | |
} | |
.home-slider .right { | |
text-align: right; | |
} | |
.slider-text { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
width: 100%; | |
z-index: 1; | |
color: #fff; | |
text-transform: uppercase; | |
} | |
.slider-text .btn.btn-custom { | |
margin: 25px 0 0; | |
} | |
.home-slider .owl-nav div { | |
width: 50px; | |
height: 50px; | |
line-height: 50px; | |
text-align: center; | |
font-size: 24px; | |
border: 1px solid #fff; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
color: #fff; | |
left: 8%; | |
visibility: hidden; | |
opacity: 0; | |
} | |
.home-slider .owl-nav div.owl-next { | |
left: auto; | |
right: 8%; | |
} | |
.home-slider:hover .owl-nav div { | |
left: 3%; | |
visibility: visible; | |
opacity: 1; | |
} | |
.home-slider:hover .owl-nav div.owl-next { | |
left: auto; | |
right: 3%; | |
} | |
.home-slider .single-slider h1.animated{ | |
animation-duration: 1.5s; | |
} | |
.home-slider .singleSlide p.animated{ | |
animation-duration: 1.2s; | |
} | |
.home-slider .single-slider .btn.animated{ | |
animation-duration: 1s; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment