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>
Related
Hi I've been trying to imploment a parallex image into a page today but I cant get the image to be as wide as the page (gets close but leaves a small gap) and also it won't move at all only dissapears when I change position to absolute.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="pexels-emiliano-arano-1350197.jpg">
</div>
</div>
.container {
max-width: 100vw;
margin: 0 auto;
}
.parallax {
min-height: 500px;
background: transparent;
}
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'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 have a problem to get exact width of flexbox after rendering contents.
I am working on a Windows 8 application (mean ie10 specific).
Here is the code:
[HTML]
<html>
<head>
<title>flexbox test</title>
</head>
<body>
<div class='container'>
<div class='viewport'>
<div class='canvas'>
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="item"> J </div>
</div>
</div>
</div>
<hr style="width: 600px; text-align: left;">
<div class="outbox"></div>
<script>tester();</script>
</body>
</html>
[CSS]
.container {
width: 400px;
height: 200px;
border: 1px solid black;
}
.container .viewport {
width: inherit;
height: inherit;
position: absolute;
overflow: auto;
}
.container .viewport .canvas{
display: -ms-flexbox;
-ms-flex: 0 0 auto;
-ms-flex-pack: start;
-ms-flex-flow: row none;
-ms-flex-align: start;
-ms-flex-item-align: start;
-ms-flex-line-pack: start;
position: relative;
}
.container .viewport .canvas .item {
width: 100px; height: 100px;color: #fff;
background-color: black;
margin: 10px;
}
[JAVASCRIPT]
(function tester(){
var canvas = document.querySelector('.canvas');
var style = document.defaultView.getComputedStyle(canvas, null);
function addToOutbox(str){
var outbox = document.querySelector('.outbox');
outbox.innerText = 'Width: ' + str;
}
addToOutbox(style.width);
})();
I was expecting width to be something else as there is a scroll bar.
Outer container width is 400px, middle one is inheriting width and height with overflow: auto and inner most is expandable.
There are eight items in flexbox with width and height 100px each. So I was expecting the flexbox width abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) but still getting 400px only which is parent dimensions. Am I missing something?
Here is the link to JS Fiddle: http://jsfiddle.net/pdMSR/ [Open with ie10 only]
The element really is 400px. The flex items that are positioned past 400px are actually overflowing.
It sounds like what you are really trying to get is the scrollWidth. If you pass in canvas.scrollWidth to your addToOutbox function you'll get what you are looking for.
I am making a menu which has three parts to it:
Menu links left
Images
Menu links right
I need the menu links on the left and right to expand the full width of the screen and the image to be in a div with a fixed width and centered.
So I have the following setup
<div class="menuLinks">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks">Some links</div>
And the css
.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}
Any help with this is much appreciated.
Thanks
This is a solution which is Fully CSS and HTML.
CSS
#wrapper{
width:100%;
text-align:center;
overflow: auto;
}
#block-images{
background-color: silver;
width: 400px;
margin:0 auto;
position:absolute;
left: 50%;
margin-left: -200px;
}
.wrapper-menu-left{
float:left;
width:50%;
}
.wrapper-menu-right{
float:right;
width:50%;
}
.menuBlock{
text-align: left;
}
#mLeft{
background-color: green;
margin-right:200px;
}
#mRight{
background-color: navy;
margin-left:200px;
}
HTML
<div id="wrapper">
<div class="wrapper-menu-left">
<div class="menuBlock" id="mLeft">left</div>
</div>
<div class="wrapper-menu-right">
<div class="menuBlock" id="mRight">right</div>
</div>
<div id="block-images">images</div>
</div>
Here is your html menu :
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
Just use css to size menuImages :
<style>
.menuImage{width:400px;float:left;}
</style>
Use javascript on load to find screen resolution and find each link div size :
<script language="javascript">
function resizeMenu()
{
var linksList = document.getElementsByName('links');
for(var i = 0; i < linksList.length; i++)
{
linksList[i].style.width = (screen.availWidth
- 2 * (400) //size of total images)
/ linksList.length; // total number of linksCount
}
}
resizeMenu();
</script>