OWL CAROUSEL fixed height? - javascript

I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent. I'm using this plugin to display my photography, and I have both landscape and portrait sizes. I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height?
I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width. It looks like there is a set width, and when I adjust the width, the image just gets stretched. I have 19 items in the carousel. Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched. Any ideas on how to fix?
Here's the CSS code I've used:
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: true,
margin: 0
}
}
})
})

you can use this code in your css
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item img {
width: auto;
height: 100%;
}

If you're using Bootstrap, then add the img-responsive class:
<img class="img-responsive">
This worked for me, I was also facing the same issue.

try to play with something like this:
display:block; height:500px !important; margin:0 auto 30px;

add style to img tag, owl carousel automatically adjust the height to the biggest image. img tag width height might not work, try adding css styles
<img
class="img-fluid"
src={require("../../assets/assorted-flowers-on-table-2253831.jpg")}
style="width:800px; height:600px;"
/>

Add to your style:
img {
width: 100%;
height: 500px!important;
object-fit: cover;
object-position: center;
}
And if you need, force the height on every parent of your image. That worked for me.

Related

Slick slider gets wrong width

My slick slider gets wrong width when initialized and when I change screen resolutions.
My js:
$('.slider').slick({
infinite: false,
speed: 300,
initialSlide: 1,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 650,
settings: {
initialSlide: 2,
slidesToShow: 1
}
}]
});
My css:
.sub-slider {
width: 100%;
display: flex;
flex-flow: column;
.slider {
display: flex;
flex-flow: row;
justify-content: center;
align-content: center;
align-items: center;
min-width:500px;
.sub-box {
text-align: center;
padding-top: 45px;
cursor:pointer;
.title {
color: #6deca0;
font-family: "AmsiProNarw", sans-serif;
font-size: 48px;
font-style: italic;
font-weight: 800;
}
.price {
color: #393939;
font-family: "AmsiProNarw", sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 800;
}
.sub-slider-btn {
margin: 60px 20px;
border-color: #eaeaea!important;
background-color: #fdfdfd!important;
color: #686868!important;
}
}
.sub-box:hover {
transition: border .2s;
border-bottom: 14px solid #6deca0;
.sub-slider-btn{
border-color: #6deca0!important;
background-color: rgba(108,235,159,.2)!important;
color: #393939!important;
}
}
}
.sub-slider-confirmation-btn-wrp {
align-self: center;
display: none;
.sub-slider-confirmation-btn {
cursor:pointer;
$margin: 20px;
$height: 45px;
height: $height;
width: 80px;
border: 1px solid #ccc;
border-radius: 8px;
margin: $margin $margin $margin $margin;
text-align: center;
line-height: $height;
font-weight: 800;
}
}
}
This is how it is loaded, even though I have specified slidesToShow: 3.
Then when I change to resposive it looks like this:
I am not sure how to fix this. I have read through these, with no fix:
Slick slider wrong width on initialization
Slick carousel loads the wrong width on initialization
https://github.com/kenwheeler/slick/issues/790
https://github.com/kenwheeler/slick/issues/1180
https://github.com/kenwheeler/slick/issues/2167
edit:
I made a fiddle https://jsfiddle.net/simeydotme/fmo50w7n/
It seems to work in the fiddle, but not on my site. Maybe I inherit some bad css? But I've been trying to debug this for 5h now. And I cant find any solution..
I also encountered the same issue - slider track width too large upwards of 30,000px wide. After reading Spencer Rysman's answer, I reviewed my markup and realized that I had applied a row class to the div wrapping my slider and since I'm using bootstrap 4 the default display:flex property used with the row class was causing unexpected output with the slide elements.
Adding a col within the wrapping row div fixed the issue for me.
<div class="row">
<div class="col-12">
../slider markup
</div>
</div>
Although, this may not be directly related to the op's issue, I thought I'd post as other users may encounter a similar problem as I did and find this thread.
I have the same problem only on screens <768px with bootstrap4, slick (and owlCarousel) set width more then 10000px to there container. The issue was that's the bootstrap container (.container) does't have a width property <768px, set it to 100% resolve the problem.
Short Answer:
Make sure that your slick slider is inside of a container which is set as display: block
I had this same issue and was also dealing with some inherited bad css from stylesheets that I did not author. In my case I found 2 problems:
body had a declaration of display: table
.page (a page wrapper) had display: inline-block
So I would check to make sure that the slick slider is not nested inside of any element that is displayed as table or inline-block
On initial loading, slick will not take the width, in IOS - in few devides, if the internal content is heavy.
Its fixed for me by adding css max-width to slick-track
Check with following:
$(".slick-track").css("max-width", $(window).width());
I encountered the same issue and after attempting the above-mentioned to no avail. I revisited the docs and added this
variableWidth: true
to the javascript config block.
so your code looks like this
$('.slider').slick({
infinite: false,
speed: 300,
initialSlide: 1,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true, <=== change here
dots: false,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 650,
settings: {
initialSlide: 2,
slidesToShow: 1
}
}]
});
We can't always remove all container's display: flex and recode all CSS in page just to make a library work.
In my experience I found that the problem appears after this line:
_.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));
in version 1.8.1, where the library sets .slick-track's width it seems that any flex container (any, not the direct container) will generate the issue.
I fixed forcing (and updating on window resize event) a fixed width to the slider main wrapper, that is the element where you instantiate your slider with $('#slider-wrap').slick(...), using this little Javascript snippet:
var $sliderwrap = $('#slider-wrap');
// fix for flex begins here ----
function setW() {
// use parent width, not always the right way
// change it if your $sliderwrap parent width
// does not match your $sliderwrap width
$sliderwrap.width($sliderwrap.parent().width());
}
setW();
window.addEventListener('resize', setW);
// end fix here ----
// instantiate the slider
$sliderwrap.slick(...);
I hope this can help anyone.
Don't use display: flex for the slick containter. It will cause problem on mobile.
main div container must be
display:block;
or
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
minmax(0,1fr) is the way. Or a defined width (px, em,...). display:flex; is problem.
If any block thing works, add to your CSS file:
.slick-track {display: flex !important}
.slick-slide {height: auto;}
In my case I wanted to have at-least one entire slide always visible on both Desktop and Mobile. To do this I used the CSS vw property
.slick-slide,.slick-slide img {
max-width:90vw;
}
I got the same issue. To me the problem was caused by a (distant) parent of the slick block having the property display:grid. Turning it back to display:block fixed the problem for me.
So basically Slick shouldn't be even remotely contained in a flex or grid element.

Change the width of the images according to aspect ratio

I am building a comic reading website. I got a problem with displaying images. Most of my images are having the aspect ratio of 2/3. Means 1000x1500. So I am displaying them with below css rules. But there are some images like double page images. So when the css rule max-width=728px is applied this 4/3 raito image can't read anything. So basically I want to change the css rule for max-width=728px when the user came across to 4/3 ratio images. Css rule max_width=728px still have to apply the 2/3 ratio images but when the ratio changes to 4/3 it has to be max-width=1250px. What do i need to do for solving this? It is related to css or need some javascript. This manga website has this future I think. Double page images are displaying width of ~1300 and when i shrink the browser its javascript updating the width and height.
Example:http://www.mangaeden.com/en/en-manga/berserk/344/17/
My website:http://mangabozok.com/oku/Berserk/346/5
HTML:
<div class="gnc02">
<img src="paths">
</div>
CSS:
.gnc02 img {
display:block;
margin:auto;
max-width: 728px;
height: auto;
}
You can try the following style:
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
For the 2:3 images, the max-height applies and restricts the width to 728 pixels. For the 4:3 images, the max-width applies and restricts the width to 1250 pixels.
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>
Note: when running the code snippet, you should switch to "Full page" mode.
.gnc02 {
max-width: 728px;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
float:left;
}
try this
.gnc02 {
width: 99% !important;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
this code is used for responsive designing. I think this may help you in any type of image or the size of the image.

Slick carousel has 0px width when loaded in collapsed tab

When loading slick slider in collapsed content (angular-bootstrap collapse plugin in this case) the .slick-track div gets 0px width, resulting in the slider trying to fit all slides on top of eachother. When pressing arrow to see next slide, the slides go back to normal. If I select the slider and want to check the components in my browser, it also goes back to normal.
Please see this example:
http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview
This is the slick configuration I'm using:
$(document).ready(function(){
$('.tourImageSlider').slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1500,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}]
});
});
Would anyone have an idea of how to solve this?
Finally I got the answer by slick creator Ken Wheeler himself. When collapsable content is triggered open, simply call the following line:
$('.slider-class').slick('setPosition');
...and replace "slider-class" with the class name of your slider.
Personally I created an angular function with this line, and triggered it with ng-open.
Problem related to the reason that slick carousel cannot get correct width from block that has {display: none} or small width like {width: 1px}.
This situation is often occurring when content is hidden with styles like in example below:
.product.data.items>.item.content~.content {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The idea is to use {overflow-y: hidden} and {height: 0} for content hiding instead of {display: none}. And after tab activation, it is needed to set {height: auto;} for content.
// fix for slick carousel that initializes with zero width in collapsed tab
// it happens in tab with {display: none;} + small width like {width: 1px;}
.tab-content-selector {
width: 100%;
display: block !important; // if it set to display: none by script
overflow-y: hidden;
height: 0;
padding: 0 15px; // can be adjusted according to needs, but top and bottom padding must be zero
}
.tab-title-selector.active + .tab-content-selector {
height: auto;
padding: 10px 15px 30px; // can be adjusted according to needs
}

How to make SpriteSpin responsive?

Site i am working on is made with twitter bootstrap and is fully responsive. I have successfully made SpriteSpin to work with my site but there is a problem, i can't make it responsive as rest of my site because it adds inline css to div where the image is.
JS looks like this:
First it calls images:
$(function(){
var frames = [
"folder/image.jpg",
(other images)
];
Then this:
$("#mali").spritespin({
width : 960,
height : 540,
(other code)
});
How can i change this fixed width and height and put there css class or w/h to 100% so that is responsive.
I already tried to add css class to container with this but no success:
$( "div" ).addClass( "myClass" );
I believe the problem here is that the script somehow adds inline css
<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">
You can see it on official SpriteSpin website (link below) when using inspect element on Bicycle image.
Help me fix this issue or suggest me other 360 image sprite spin solution that is responsive and works on mobile touch.
SpriteSpin: http://spritespin.ginie.eu/
You can override CSS by adding !important after your own CSS directives.
In it's simplest form:
background: red !important;
If you have inline style attributes in HTML:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
you can try this CSS:
div[style] {
background: yellow !important;
}
But it's not really good practice to rely on it in production code. More info:
http://css-tricks.com/when-using-important-is-the-right-choice/,
http://css-tricks.com/override-inline-styles-with-css/
I know this is an old post but I ran into this same problem today. Basically all you need to do is set a media query at each screen size in your css to resize the container and the images will respond since their widths and heights are already set at 100%.
#media only screen and (min-width: 100px) and (max-width: 767px) {
.spritespin, .spritespin-instance {
width:383px !important;
height:300px !important;
}
}
It's great to use it with bootstrap solution for responsive embed objects
var $container = $(".images3d-container")
if ($container.length && $.fn.spritespin != undefined) {
var source = []
$container.find(".images").find('img').each(function () {
source.push($(this).attr('src'))
})
$container.find(".view").spritespin({
source: source,
animate: false,
renderer: "image",
width : 450, // width in pixels of the window/frame
height : 450 // height in pixels of the window/frame,
})
}
.images3d-container .images {
display: none;
}
.images3d-container .view {
width: 100%!important; /* here it is */
height: 0 !important;
padding-bottom: 100%;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
<section class="images3d-container">
<div class="view"></div>
<ol class="images">
<li><img src="/img/1.jpg"></li>
<li><img src="/img/2.jpg"></li>
<li><img src="/img/3.jpg"></li>
<li><img src="/img/4.jpg"></li>
</ol>
</section>
I know this question is old, but for people that happen to look for an answer: the plugin now has a setting for this. Just add responsive: true, and set the width of the SpriteSpin. See the official demo.

Auto height grid

I have a product grid on my e-shop (http://shop.rukahore.sk/). Every product div is 222px x 222px, but I want it to have auto height.
I tried something like this - http://patterntap.com/code/stacking-columns-layout-masonry ,
but I had to add min-height and it didn't look good because some of the images were smaller or bigger and wrapping div was still 222px, which I don't want to happen due to hover effect, etc.
Can someone provide advice regarding this?
Well, for using the display shown in that page you need to use the plugin
<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->
If you don't want to add more plugins... Well, what makes you lose the height is the float css property. You should use other thing to make the grid, see for example how they do it in www.camarasdecolores.com.
To add the Masonry plugin:
Add an id to your container:
<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">
Add the init js code in a script
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.hp-product',
columnWidth: 60
});
});
change some css:
#masonryContainer { width: 0 auto; }
.hp-product {
width: 180px; float: left;
}
.hp-product-img {
}
.hp-product-img img {
max-width: 100%;
height: auto;
}
//Void the following ones
.hp-products {
}
.allposts {
}
.allposts .hp-product {
}

Categories