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
Related
I'm looking for some help with pointers on how to achieve a moving background similar to scooby doo or other another cartoons - eg on the press of a button the background slides right to left, the character animates (starts a GIF animation).
Im creating an animating character who will sit on a left hand side div. On clicking the character the div behind the character (the whole background, and other divs within in it) will slide from right to the left and a new div container will slide in to fill the gap. So essentially will appear like the character is walking but in fact the background behind him is moving from right to left.
I'm sure this must have been achieved before, but looking for some pointers on how best to achieve it. Any help will be appreciated.
My thinking is that on trigger there will be a few actions:
GIF animation starts
Whole div slides from right to left
New div (which was hidden) is now shown
New div slides from right to left, behind the old div
Old div is hidden
The issue I am finding is creating a responsive site, therefore the size of the divs moving will not have a px value but a percentage value.
If anyone has tackled something similar before or has some pointers would be really appreciated.
Thanks,
Nick
Getting myself a little confused here. I've worked this out by using a full sized owl carousel and sitting an absolute image over the top. Get my mind in gear!!
I have a slideshow of 4 banners with Prev and Next button. It works fine with the Prev button but not the Next button.My problem is Once I press the Next button, the images move not properly.
This is the result I need.=> The next image on the right slides from right to left when clicking Next button.Now it slides but sometimes some images slides back to the right.
Please help.Thank you
<http://jsfiddle.net/pktono/sr5nv6k9>
So, there was couple of issues to fix:
1- animation time was overriding the css command. To fix that, you should use setTimeout function where your aftermath code should reside inside of it.
2- When you navigate to right, you set the previous banner left property to -650px. If you decide to navigate to the left at this moment, you have a wrong left property which ruin the rules. The same thing can happen when you are navigating to left and want to switch to right. To fix this, you should change left property of the current banner to the right value before animating it.
See the working example here
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.
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
I am using jQuery to slide through some images.
The slide animation is achieved using:
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition)});
This works fine, however when I reach the final image, and it loops back to the start, this animation will quickly slide through all of the previous elements to display the first (obviously because I am suddenly reducing the left margin).
What code would I need to write in order to allow the transition from last image back to first image to continue being a LEFT slide animation, displaying only the transition from last slide to first (without showing all other slides).
To make things a little more complex, I have left/right buttons allowing the user to move forward/backwards through the slider. These work fine, but it does mean that the solution cannot break these buttons.
Thank you.