I've the following owl carousel snippet from my app. The demos in owl carousel's github page has used <img> tag for it's slider. Following suggestions from around the web I've used background-image:
$('.demo-slider').owlCarousel({
loop: true,
margin: 10,
nav: false,
touchDrag: 1,
dots: 0,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})
.owl-carousel .item {
width: 100%;
height: 512px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-image: url("https://source.unsplash.com/1024x512/?coffee");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme demo-slider">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
But the above snippet doesn't produces any slider. What I've missed here ?
You missed dot for class selector item in CSS:
.owl-carousel .item {
and I am not sure that you can use height: auto;
you need to set specific height like height: 50px;
As described in this answer, if you use <div> instead of <img>, you'll get a background image.
Additionally you have to provide some css to make it look right.
Here is a working example
$('.owl-carousel').owlCarousel({
items: 4,
lazyLoad: true,
loop: true,
margin: 10,
});
.owl-lazy {
height: 200px;
background-size: cover;
background-position: center center;
}
.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
max-height: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="owl-carousel owl-theme">
<div class="owl-lazy" data-src="https://placehold.it/350x250&text=4"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x250&text=5"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x250&text=6"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x250&text=7"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x250&text=8"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x400&text=9"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x400&text=10"></div>
<div class="owl-lazy" data-src="https://placehold.it/350x450&text=11"></div>
</div>
Here is the solution!!!
When you try the background image you have to update the height in your style.
E.g.
.owl-item {
...
}
for Window height:-
min-height: 100vh
for fixed height:-
min-height: 100px
note: you can change "min-height" to just "height" as per you requirement.
Related
I have put together an image carousel with the help of Swiper.
My carousel uses background images, bullets and vertical transition. I want this vertical transition to be unidirectional. In other words, the carousel transition direction should be upwards, regardless of the succession of the bullets clicked.
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
auto: true,
speed: 1000,
loop: true,
autoplay: {
delay: 9000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
controller: {
inverse: true,
}
});
.swiper-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
height: 265px;
}
.swiper-wrapper {
height: 265px;
}
.swiper-slide {
transition: 1s ease-in-out;
top: 0;
width: 100%;
height: 265px;
background-repeat: no-repeat;
background-position: center center;
}
.swiper-slide img {
margin: 0 auto;
width: 620px;
height: 265px;
}
.swiper-container-vertical>.swiper-pagination-bullets {
bottom: 0;
top: auto !important;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 !important;
outline: none;
opacity: 1;
float: left;
width: 18px;
height: 18px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-position: -528px -524px;
}
<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?
Maybe this will help you, pass the parameter allowSlidePrev: false;.
I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .
Is there an approach to to create a centered owl-carousel where each image has the same height without losing its aspect ratio?
I tried to calculate the image sizes with JS/jQuery, but then the calculation of the owl-carousel gets messed up. Same result with CSS s. example (JSFiddle):
$(document).ready(function () {
$('.loop').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 20
});
});
.owl-carousel .owl-stage {
height: 150px;
}
.owl-carousel .owl-item {
height: 100%;
}
.owl-carousel .owl-item .item {
height: 100%;
}
.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>
The current div/image should be
in the center of the carousel,
has the same height like all other items
keeps it aspect ratio and
is side by side to the previous or next item.
If the element is bigger wider then the viewport, well than it gets cut.
Is there even a method to achieve that with the owl-carousel?
I checked some other similar questions on SO but as far I can see they have all different focus:
Image slider: maintaining equal height for all images while keeping slider responsive
// overrides the aspect ratio
Owl Carousel align each item vertically when their height not equal
// not the same height of each item*
I just double checked the auto-height demo...
To enable use autoHeight: true. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to highest item.
Seems like there is not such an options yet.
If all of your images have the same height - try adding autoWidth: true:
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
center: true,
margin:10,
loop:true,
autoWidth:true,
items:4
})
});
.owl-carousel .owl-stage {
height: 200px;
}
.owl-carousel .owl-item {
height: 100%;
}
.owl-carousel .owl-item .item {
height: 100%;
}
.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>
I have a 1 column/3 rows grid with 3 equal sliders, 1 in each row. Each slider contains the same sized slides.
I set the parent container to 100vh, each child filling up 1/3 of the screen's height, 100% of the screen's width.
What I am struggling with is to keep the images within the containers centered and always fully visible. In essence, I would like to have the sliders fill up the whole width and height of the screen, but the images within the slides always fully visible with a flexible padding left and right. Right now these fill up the full width in each row but only parts of the images are visible height-wise (cropped depending on aspect ratio change)
Here is the code I got so far (the snippet doesn't seem to render right even thought it doesn't give me any console prompts and runs just fine in my editor):
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.theme.default.min_home_up_6.css">
<style>
.owl-carousel {
width:100%;
}
.grid-1 {
display: grid;
height: 100vh;
grid-template-columns: repeat(1,1fr);
grid-template-rows: repeat(3,1fr);
}
/* items */
.grid-1 div {
color: white;
max-height: calc(100vh /3);
font-size: 0px;
padding: 0px;
}
/* specific item styles */
.item-1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
width: auto;
height: auto;
overflow: hidden;
}
.item-2 {
grid-column: 1 / span 1;
grid-row: 2 / span 2;
width: auto;
height: auto;
overflow: hidden;
}
.item-3 {
grid-column: 1 / span 1;
grid-row: 3 / span 3;
width: auto;
height: auto;
overflow: hidden;
}
#import "compass/css3";
</style>
</head>
<body>
<section class="grid-1">
<div class="item-1">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
<div class="item-2">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
<div class="item-3">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.js"></script>
<script>
var someFunction = function(){};
(function() {
$('.owl-carousel').owlCarousel({
center: true,
items:1,
loop:true,
dots: false
})
})();
someFunction();
</script>
</body>
</html>
I'm trying to create a slideshow embedded inside a smartphone image for my website.
Creating the slideshow is pretty easy using Owl Carousel.
What i'm unable to do is placing my div inside the phone image so that it covers all the screen, even when the image has different sizes.
I started by measuring the margins that I had to apply in percents, but I don't like this solution.
Is there a way to manually set the four corners of the div relatively to the image ?
I can use jQuery
Checkout the SNIPPET below.
$('.owl-carousel').owlCarousel({
center: true,
items:1,
loop:true,
margin:0
});
.screen .item{
background-color:#5fba7d;
}
.phone{
background-image: url(https://i.stack.imgur.com/vKQ2K.png);
width: 320px !important;
height: 650px;
background-position: -25px 0;
}
.no-js .owl-carousel, .owl-carousel.owl-loaded {
position: relative;
top: 48px;
width: 278px;
left: 20px;
height: 100%;
}
.owl-stage-outer, .owl-item, .item{
height:100%;
}
.owl-stage{
height:calc(100% - 153px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="phone">
<div class="owl-carousel owl-theme screen">
<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>
<div>
I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.
I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!
I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.
Thanks in advance for all the help.
I need it to look like this:
There a couple of things you must do in order to customize the controls :
You have to have the controls in the first place. By default, the prev/Next controls are are set to false:
navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
Owl Carousel CSS (Optional Recommended):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
Owl Carousel Themed CSS (Optional):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
Font-Awesome Icons CSS (Optional):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
jQuery (Essential):
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
Owl Carousel JS (Essential):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<!--These 4 external Files are necessary for Owl to function-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
-->
<!--This link is both owl CSS files combined into one-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel#1.31(owl.carousel.css+owl.theme.css)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<style>-->
<!--This tag is both JS files combined-->
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.4,jquery.owlcarousel#1.31"></script>
<style>
/*
| SVG Nav Arrow Style
*/
/* https://gist.github.com/seeRead/11229083 */
.prod-slider-container {
position: relative;
font-family: font-awesome;
}
.owl-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.owl-prev,
.owl-next {
position: absolute;
}
i.fa {
cursor: pointer;
position: absolute;
font-size: 60px;
padding-top: 8px;
height: 64px;
width: 72px;
color: rgba(0, 0, 0, .5);
background: rgba(0, 75, 222, .7);
border-radius: 50%;
display: table-cell;
}
.owl-prev,
.owl-next {
background-color: transparent;
border: 0px none transparent;
width: 0px;
height: 0px;
}
.owl-perv {
left: 0;
}
.owl-next {
right: 72px;
}
.item {
outline: 3px dashed grey;
}
</style>
</head>
<body>
<!-- + PRODUCT SLIDERS -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="slider_header_text">
<b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
<div class="owl-carousel">
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
</div>
<!--.owl-carousel-->
</div>
<!--.prod-slider-container-->
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
autoPlay: 3000,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
</script>
</body>
</html>