I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <ul>, but these varying image sizes don't play well. Flexslider nicely animates when images have different heights, but I want to have Flexslider have a fixed height and width to fit in my layout. I've tried putting the whole thing into a fixed-size <div>, but Flexslider ignores it completely and overflows into the rest of the layout. Is there some way to resize images to fit so that Flexslider doesn't resize?
Let's say you wanted a fixed size of 200px by 200px. Add these properties to the following selectors in the flexslider.css file and you should be good to go:
.flexslider {
width: 200px;
height: 200px;
}
.flexslider .slides img {
width: 200px;
height: 200px;
}
Hope this helps!
The element with the class ".flex-viewport" is the container of the slides, that element adapt his height to the taller image in the set, the trick is set all images height's to 0 except the one that is in the current slide which is inside the li element with the class ".flex-active-slide" that flexslider script toggle when slides exchange positions, the only bad thing about this trick is that the toggle of the class occurs after the new slide is put in the new position then a stutter occurs, but you can deal with that by using some javascript binding some toggleClass to the same event that trigger the slide change, help to be helpful.
.flex-viewport li:not(.flex-active-slide) img{
height: 0 !important;
}
Change the width via script say your width to be 400
$('.flex_up').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 400,
itemMargin: 5,
});
Remove
smoothHeight: true,
from
jQuery('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
prevText: "",
nextText: "",
slideshow: false,
smoothHeight: true,
animateHeight: false,
sync: "#carousel",
start: function(){
jQuery('#slider ul.slides img').show();
},
});
Set size with the style option of the specific div as below, with there is two slider with different size:
<div class="flexcontainer">
<div id="first-slider" class="flexslider" style:"width:100px">
<ul class="slides">
...
</ul>
</div>
<div id="second-slider" class="flexslider" style:"width:200px">
<ul class="slides">
...
</ul>
</div>
</div>
Related
I am working on a template which is bootstrap based. I need to set up a full width slick slider, but its initial state should start at the left edge of the content container, and then progressively slider further left.
I tried to represent what needs to happen on the image below. The black border represent the viewport, the red border represent the content container. The first row is the initial state, the other 2 rows show the position of the slider after clicking the "prev" arrow:
Is this possible? And if so, how?
Thanks,
Lol, I just had to do that same thing last week. I set slidesToShow:1 and slidesToScroll:1. I also have variableWidth:false, though I'm not sure if that played into it.
The next step is to set a width on your slides in CSS to keep them from resizing out to fill the space:
JS
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false
}
CSS
/*Just to make it not full width, for this example*/
.slider{
width:800px;
margin:0 auto;
}
/*Edit, forgot this important bit. This keeps the other slides visible*/
.slick-list {
overflow: visible;
}
.your_slide {
width: 280px!important;
height: 345px!important;
}
I am using slim scroll for a div. I want show the slim scroll only when the content of the div reach the max-height of the div. Is there any way i can achieve this?
$('#main-table-body').slimScroll({
height: '66px',
width: '100%',
size: '10px',
alwaysVisible: true,
distance: '7%'
});
Like this I have added slim scroll to the div.Div have a static height 66px. And content are getting added to the div dynamically. When content reach the max space in the div only slim scroll need to be showing. Otherwise don't need.
I'm using elevate zoom so that whenever it is hovered over a image it show us a zoomed portion of a part of image. In my project the image is inside a scroll. When applying elevate zoom outside the scroll also its being projected. so my question is how to hide it. Here is a sample fiddle of the problem am facing.
Problem Demo
JSfiddle
HTML
<h1>Image Constrain ElevateZoom</h1>
<div class="scroll">
<img id="zoom_01" src='https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg' data-zoom-image="https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg"/>
</div>
Css
#zoom_01 {
width: 400px;
}
.scroll {
width:200px;
height:200px;
overflow: scroll;
}
Javascript
$("#zoom_01").elevateZoom({ zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"});
You have to set width of Image for example:
img id="zoom_01" style="width:200px" ...
and set proper width of Scroll Div for example
div style="width:400px"class="scroll"..
I have a Div with some prestyle that includes height: 100%
If I add jQuery draggable to the div, and moves it around it sets a fixed height on the div.
How can I disable the fixed height so it still works with the height from my stylesheet?
$('.DTable').draggable({
heightStyle: '100%'
}).draggable({
containment: "window",
});
use a parent element in your css
.parent .DTable {height:100px;}
or use the !important on the hight
.DTable {height:100px!important;}
In implementing Easy Slider 1.7 with jQuery on a page of mine, I find that when the page first loads, both images in the ul slider display and then the slider loads properly and only the first slide is displayed.
What is the best way to correct this so that the slider div doesn't display until the script has loaded properly? I'm using this code to run it:
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
pause: 10000
});
});
You can just hide the content via CSS, like this:
#slider { display: none; }
Then show it on page load as well:
$(document).ready(function(){
$("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});
To be safe I'd add a block to the page for non-JS users, could be a style sheet inside if you have a lot of these, otherwise just a style tag:
<noscript><style type="text/css">#slider { display: block; }</style></noscript>
I added the code below to my css to hide the images from being stacked up.
/*Added to hide stacking of images on IE 7/8*/
#slider{
height:227px;
overflow:hidden;
}