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.
Related
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.
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!
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.
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.
I'm trying to get a look like pinterest, where the elements (pics w/ captions) slide into each other. There are two distinct rows here, however, I need the pics with captions to slide into each other.
http://pureformenyc.com/inspiration/
Try the jQuery Masonry layout plugin.