A client has expressed that they really like how Google Play handles their hero slider. I've tried replicating the effect in jQueryCycle to no avail. Can anyone shed some light on the best way to achieve the same effect?
For those unfamiliar: https://play.google.com/store?hl=en - the slider shows a centralized "current slider" as well as a "previous" and "next" slide preview shown behind a screen. It's continuous and you can always see a before and after.
It's not continuous. Stuff on the right doesn't slide in between slides, it just appears. It's not exactly setting the bar high for carousels.
All you really need is any old carousel split into 3 segments with translucent overlays permanently over segments 1 and 3 and one that flips on and off over segment 2. Every time a slide completes, hide the #2 overlay. Every time one begins show it again.
Stuff you'll want to know:
Rooting absolute elements to relative positioned elements with CSS so you can fix absolute panels over the content stuff without affecting layout.
Using callbacks or custom events with jQuery.
How to make transparent/translucent .png images with Photoshop to use as panel backgrounds.
Related
I have a carousel with cards that will hold content, viewed like you would view a book, I would like them to flip through the full array of cards, with the choice of going forwards and backwards.
The set up I have works if you continuously click on either the next or previous sections, if you click going the opposite way the cards will end up in the correct position, however the transitions are messed up.
Are you able to help me solve the transition issue?
I have attached a link to a CodePen
https://codepen.io/NPGB88/pen/GRxjJbq
enter code here
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 using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
What is the best design to implement this image slider?
Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
You could use the same technique to loop through the list seamlessly.
Try this.
Hero carousel
It fits your description....Hope it helps out :)
this might be a solution too.
http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best
Fairly simple, if you use the cycle plugin for jquery and create a slideshow the transition between slides allows what's beneath the slides to show. I want to avoid this and have one slide truly fade into the other rather than kind of fading into the background and then into the next slide.
Is this possible?
Thanks!
Example:
http://www.sonicinteractive.com.au/_WIP/slider_problem/
See how the white line (and background) come through..
Place an image below them but above the page with a neutral colour that blocks out the page background in the region of the image (i.e. create it from the same mask used for the images themselves).
Hi I have solved the problem by removing the background colour of the wrappers containing the slider as well as the "main wrapper". For the latter I only left the backgound-image to do the job.
Hope that this helps