I have slick slider with adaptiveHeight attribute set to false. So, if i have small image in slick container first slide - it will be centered vertically, and left areas will be filled with background color (like in this image).
How can i calculate slick slider area height before slick is loaded to prevent 'jumping' on load? Do anyone know, how slick calculates image height and width in slick container? Any ideas?
You could wrap slick with a plugin like ImagesLoaded to ensure your images have a height before initialising Slick. If you don't want the flash of unstyled images this will create, you'll need to apply some styles to hide them initially (e.g. position them absolutely off the left side of the screen) and then remove these styles when your images are loaded, something like:
$('#slider').imagesLoaded( function() {
// remove your hiding class
// initialise slick
});
Related
hi I have a slider in revolution slider that is vertical slider and I want it work like usual page and when users scroll the page it change slides but it only changes slides when the mouse is in the slider area. And with window scrollbar doesn't do anything and stops. how can I do this? maybe some javascript code is needed or what?
I tried the scroll options in revolution slider(window,body,both) but it doesn't change
I'm working on a custom jQuery plugin to convert a Bootstrap grid into a carousel for mobile devices. For example, let's say I want to display a group of div's as a regular grid for viewports over 1000px wide, and then transform those div's into a carousel for viewports under that. This is the interface:
$(".row").gridCarousel({
threshold: "1000px", // Grid / Carousel threshold (viewport max-width)
indicators: true, // Insert carousel indicators?
controls: true, // Insert carousel controls?
carousel: {interval: false}, // Configuration object passed to Bootstrap's carousel
});
So far, so good. The issue I'm running into is that the carousel "active" indicator is not being cycled after crossing the viewport-width threshold for a second time.
Steps:
Start with a desktop viewport, see the content as a grid.
Switch to a narrow viewport, and the content is transformed into a carousel. Indicators work fine.
Switch back to a wide viewport. Content is displayed as a grid again.
Switch to a narrow viewport again, the content is transformed into a carousel, but the "active" indicator is not moving. You can still click on the indicators and you'll be taken to the correct slide, but the "active" class is not being updated.
I've setup a demo for the plugin. It contains the complete source of the plugin and then a call to it at the end. You can resize the CodePen viewport to see the effect and reproduce the problem.
I have an image of a computer screen in my landing page and I want the screen to show different images as slides. Is there any way to do this using bxslider or any other method?
you could have your image as a background on .bx-wrapper and use padding and the correct height and width to make the slider fit correctly
I'm using Flexslider which calculates the image size based on the parent element width, which makes it responsive because it resizes when you change the browser size.
The problem I'm having is that when I load the page, you see a colapsed slider until the images are loaded which makes it look bad. However, if you go to flexslider site at http://www.woothemes.com/flexslider/ you'll see that it has a loader.
Is there an option in flexslider for automatically behaving this? I couldn't find one.
Try giving
min-height
min-width
using CSS to the div block in which you are having the images so that it might atleast not collapse
In flexslider stylesheet they have give .flexslider a min-height of 280px and used a gif loading image as its background. You should use that. Your problem will be solved.
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?