Slick carousel inside other carousel - overflow and bug lazyloading - javascript

I used slick carousel from http://kenwheeler.github.io/slick/
There is a product carousel, which on hover displays a box-shadow with a product, containing another carousel, which in turn displays the product variants. See a simple demo here.
These are the problems I have:
When I hover over a product, overflow: hidden has no effect in slick-slider > slick-list
Lazyloading with ondemand value does not work: when I click an arrow, main product images are not loaded. Though, when I change lazyload to progressive, everything is alright. But I need ondemand due to DOM content loading and total size.

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.

Thumbnail fix in Blueimp Image Gallery

I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature

Owl Carousel 2 with lazyload option

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.

How to avoid carousel items loading as a list on page build

I'm working on a layout for a client which includes a carousel of product icons at the top of every page, the idea being visitors can jump to that section of the site from the carousel. However when loading the page the icons are initially displayed as a list until snapping into place once the page is done.
I've tried things like setting the display to none, then using javascript to show it when the page has loaded and also after the carousel has initialised, but that didn't seem to work.
Understandably the problem is getting worse as the page below gets more complicated. Any bright ideas as to what to try?
The page uses Jquery & Bootstrap with Slick.js for the carousel.
Here's a sample page from the layout: http://www.webeditors.co.uk/se/course.php
You could add setTimeout() for the carousel and then display the images with style.display = "block" or removing a "hide" class after the timeout.
I don't know how you've styled the icons, but could you style them with UL and float the LIs
<ul>
<li><img><li>
<li><img><li>
</ul>
li {
float: left;
}
This way they should be in place when page loads. CSS is faster than JS.

Setting number of slides to include in FlexSlider pagination

I have a FlexSlider carousel setup similar to this example:
http://flexslider.woothemes.com/thumbnail-slider.html
These are two linked carousels, the thumbnail carousel at the bottom can be used to navigate through the top slides.
I can use the controlNav option to output pagination links, like the dots under the carousel on the FlexSlider homepage.
However, a pagination link will be output for each and every slide. Instead I'd like just the number of visible "rows" of thumbnails to be output.
Taking the example linked to above, say there's three rows of thumbnails which can be navigated through, the pagination links might look like this:
Is this possible with FlexSlider? I don't want a dot for each slide, but of each visible "pane" of thumbnails.

Categories