I was wondering, has anyone encountered a slider library than can do the same styling (or maybe close) like the attached image?
Slider
I tried using both slick and owl carousel and styled via CSS and JS but I end up messing up the sliding functionality. I've been stuck browsing all available slider/carousel libraries.
Thank you in advance
Related
I am not sure if this is possible with slick slider to have bottom navigation as scrollbar and not the "dots". Of course, this is something that is not provided default in the slick slider but is there anything that we can do to make it work? Similar solution is provided by other JS library such as sly js. But i just want to know if it is something that we can do with slick.
I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked
I am looking for an image slider which can be used by touch devices as well. I don't want to reinvent the weel and found the very nice jQuery Slider
owlcarousel.
On the page http://www.skyplugins.com/sky-jquery-touch-carousel/tooltip_skin_variation.html I found an other slider.
This slider slides more smooth without interrputions which looks much more better to me. I don't understand the technique behind this slider. Whats the difference to owlcarousel? Is it possible to merge the (much more) options from owlcarousel (example easy ajax image preloading) and make them more smooth scrolling like the other one? Does the other one only use an other css animation or is it somehow related to the jquery.touch library? I would like to understand the scrolling technique behind the second slider.
I hope you can help.
Regards Sturmi
I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.
I'm trying to recreate a slider like on the following link in the sidebar called recent results: http://demo.themeum.com/sportsline/. Here you see an slider with a fixed background and with content sliding. i've tried recreating it by different frameworks, but it does not seem to be responsive? so how could i recreate something similar as in the link?
Use bootstrap. That is what they are doing in your link:
http://getbootstrap.com/examples/carousel/