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/
Related
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 effect that I have seen on numerous occasions and that can be seen on the second image on this website:
https://www.daviseyecenter.com/
The effect I am referring to is how the image moves down so that you can see more of the top part of the image. What exactly is this called and how would I go about replicating this effect?
I believe what you are looking for is a parallax effect or more specifically parallax scrolling.
I see you have a jQuery tag, here is a link to a jQuery parallax scrolling plugin. That page has demos of the effect as well as explanations for how to add the effect to your own site.
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've been trying to make a slider with full screen background in all resolutions.
here is the example:
http://www.ssplab.com/clients/Polimeks/index.html
I'm using RoyalSlider. But it just doesn't work fine and how i expected.
I looked to SuperSized slider. But it just slides through the images, i need the content too.
i searched full-screen slider with content before some day for my project, and i succeed using below link's example:-
http://nicinabox.github.com/superslides/#5
Hope it will be usefull for you....
You can buy this Fullscreen Image Gallery: http://www.codegrape.com/item/jquery-fullscreen-image-gallery-v2/1439
I have a question related to a JQuery topic. I am using a JQuery slider, as shown in this link
The navigation is controlled by the thumb images. Now I would like to create a link underneath the slider to control the scrolling images. I would like to change the position of the main picture, and the thumb picture position as well, what is used to navigate. Is it possible with a javascript; or do i need to configure a whole new event in my Jquery?
Thanks !
Find here and setup code