Menu
I'm trying to implement the Owl Carousel with Lazyload images for a portfolio site and am having issues with positioning my navigation buttons. Ideally i'd like to add these on the outside of the carousel positioned halfway up the image. I have seen a couple of examples where this is operational but just cannot fathom it out. Can someone please help?
I have added a JSfiddle here: http://jsfiddle.net/iameuanmackay/448htq9b/
The code i'm using is:
<div class="col-xs-8 col-xs-push-2 col-md-push-3 col-lg-6 col-lg-push-3" style="padding-left:45px">
<div class="owl-demo">
<img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_02.jpg" alt="">
<img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_02.jpg" alt="">
<img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_03.jpg" alt="">
<img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_04.jpg" alt="">
<img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_05.jpg" alt="">
</div>
</div>
CSS:
#owl-demo .item {
display: block;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.owl-theme .owl-controls {
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div {
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;
/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);
/*IE7 fix*/
opacity: 0.5;
}
And the js is:
jQuery(document).ready(function ($) {
$('.owl-demo').owlCarousel({
items: 1,
nav: true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"],
lazyLoad: true,
loop: true,
margin: 10
});
});
Any guidance that can be given on what i'm doing wrong would be much appreciated.
Thanks in advance.
819
The icon-prev and icon-next classes creates arrows that points left and right. These are used to slide to the next item in the carousel. If you do not want to use them, you can use glyphicons instead.
$(document).ready(function() {
$(".slider1").owlCarousel({
margin: 15,
items:1,
responsiveClass:true,
nav: true,
autoHeight: true,
loop:false,
navText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
],
loop:true,
responsiveClass:true,
responsive:{
0:{
items:1
}
}
});
});@import url(http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css);
.owl-carousel {
margin: 0;
}
.owl-carousel .owl-nav [class*=owl-] {
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 0;
text-align: center;
}
.owl-carousel .owl-nav [class*=owl-]:hover {
background: rgba(0, 0, 0, 0.9);
color: #FFF;
}
.owl-carousel .owl-prev,
.owl-carousel .owl-next {
position: absolute;
top: 10px;
height: 30px;
margin: auto !important;
}
.owl-carousel .owl-prev {
right: 45px;
}
.owl-carousel .owl-next {
right: 10px;
}
.owl-carousel .owl-dots {
display: none !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Single Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="owl-carousel slider1">
<figure>
<img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
</figure>
<figure>
<img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
</figure>
<figure>
<img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
</figure>
<figure>
<img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
</figure>
<figure>
<img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
</figure>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js" type="text/javascript"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
