Owl Carousel 2 with lazyload option - javascript

I'm using Owl Carousel 2 in a project and it's working great.
I want to lazyload the images in each item. Thankfully, Owl Carousel 2 has a built in option for that. However, there is no option to lazyload the images in the next one or two items (which are not yet in the viewport) preemptively.
Has anyone elso come across this issue or are there any solutions to be offered?
For example, in this demo, four slides are in view. But I would like images in slide 5 and 6 to be loaded pre-emptively. And when you scroll through the carousel, whichever slides are the next two to be shown but not yet visible should also start loading before they become visible.

You can try to add lazySizes. lazySizes is a third party lazyloader, which detects near the view images automatically and therefore can be used with many sliders without configuration.
In case you want to force a preload you can also add a the class lazypreload.
Here are two examples:
lazySizes with flexslider
lazySizes with Flickity
Be aware, that you likely need to specify the image dimensions.

Related

Slick slider should only show 4 slides. However part of a 5th slider is showing when it should not

I am creating a slider of properties, I am using the slick slider library. However part of the next slide is showing and part of the last slide is cut off.
I only want 4 slides to appear at desktop level.
I have tried stackoverflow and googling solutions with no luck.
https://codepen.io/bkdigital/pen/VoXGmR - To run the code you will need to open the codepen in firefox and have an add on to allow CORS to view the slider in action.
code
Wrapping the slider elements inside a div fixed the layout issues.

Youtube / Google Style Carousel Slider

I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!

Owl Carousel - only scrolls 1 tab

on this site site link there is a owl carousel within a tab system however only the first tab is able to scroll using buttons, when switching tabs the buttons no longer work, any ideas what causes this or how to fix it?
even if the 2 sliders are in different containers, as you can see the bottom containers arrows will slide the content in the top and then stop working for all others.
well i've tried editing the css classes for the .active although i think its most likely javascript, if it didnt load completely id straight guess that but the autoplay and other files are all working and ive run out of options to think of so if anyone else has had this issue or could point me in a different path to look for a solution that would be really helpfu.
fixed now. seems the person who originally coded it used a weird mixture of different scripts all together and different structure, so stripped away those and set it to use the one set of attributes.

Crossfade effect with carousel not working properly

I have two caroufredsel sliders with the same effect:
the first slider where on the homepage doesn't cross fade
http://www.clubseekr.com
however on another page where the same slider is used with same effect it does work
http://clubseekr.com/tokyo/unit/
In order to go to the slider just click on one of the 4 photos underneath the heading: Photos
In order to get it with the desired crossfade effect I use the following code
$('#carousel').carouFredSel({
scroll : { fx : "crossfade" }
});
The total code is a bit more than that but this should give the effect as well on the homepage.
Is there something i am doing wrong in the slider?
most probably you have a Hero-rotating bar in your home page and that JavaScript functions conflict with your carousel JavaScript functions. if i faced this problem i will get any one of those parts to another page and join it using Iframe. when you use Iframe those java functions can work on both of them separately without any collisions.

Isotope items overlap on initial load

Using a masonry layout for this site and upon the first load each box overlaps. If you use any of the navigational items to sort or even just stay on "all" they rearrange themselves. Any ideas?
I don't have a reputation of 50 yet so I can't comment, but I wanted to share a couple tips that I stumbled upon in the past as I've used this plugin a lot, and it could help other people.
First off, I definitely use the imageLoaded function as Sarah mentioned, and not the onload. (https://github.com/desandro/imagesloaded)
Tip 1 -
To speed up the isotope plugin getting to work (useful if image sizes are big, or you have a lot of them), you load a placeholder image for each container, then after the imagesloaded plugin fires, you can have the isotope plugin get to work quickly. Then you can swap the real image in with a data- attribute that contains the real src url, just do so using the isotope callback (http://isotope.metafizzy.co/events.html). The only caveot is your images would need to have the same dimensions as the placeholder or the sizing of the containers could get messed up and overlap again.
Tip 2 -
I never actually did this, but one method I was thinking of using was to load the images as a background image of the container, set a height and with for the container (or at least the image part of it), set the images as background-size: cover; and then you don't need to worry about the images loading before the isotope plugin can get to work.

Categories