I wouldn't like to use a third parties libraries to have carousel on a site. Md-tabs have very similar features, even with swipe gesture and I thought, setting time interval between tabs could be possible. It should work like this.
The Goal
Make next active tab after a time interval and circle it around infinitely.
Although I don't really have much information on what you are trying to accomplish or what challenges you have met, this answer covers some controller based functionality for a carousel.
Related
I’m having the hardest time figuring out how to go about a page transition where one element leaves one view and enters the next like the animation of the book thumbnail or surfboard from the linked images below.
I mostly work in Vue, but if anyone has insight on how this is done on the development side of things I’d be very appreciative!
Booking animation design
https://dribbble.com/shots/3878921-Booking-animation-design
Surf Project
https://dribbble.com/shots/3879463-Surf-Project
Please Check this sections of Vue documentation.
Overview
https://v2.vuejs.org/v2/guide/transitions.html#Overview
Enter/Leave from a list
https://v2.vuejs.org/v2/guide/transitions.html#List-Entering-Leaving-Transitions
You might want to look into Overdrive
or then use Velocity with Vue JS hooks
Problem
I call setState to add a new recipe to my recipe list
The recipe is a new panel in a Foundation accordion
The accordion title pops up immediately
There is no functionality until page refresh
I have tried everything i can think of including Foundation's reInit, their manual toggle, up, and down methods for accordions, and re constructing the whole accordion
nothing works
This is the solution I came up with.
i was able to call $("#element").foundation("toggle",$target,true) from the console and programmatically open and shut the accordion tab.
element is the accordion wrapper and target the specific tab, true is a param to indicate reflow needed
implementing that function into my app was more trouble than it was worth, for a number of reasons.
i ended up just calling location.reload() and which essentially is like pressing the refresh button. with a modal animation running at the same time it is barely noticeable
so when all else fails manual over-ride could be a viable solution depending on what your individual page is
There is a real answer
in my research i came across quite a few similar github issues that had to do with Foundation plus some sort of dynamic rendering and/or third party framework/library. every situation is a bit different so there isn't one answer
if someone has specific knowledge of what why Foundation or React(possibly), wouldn't let me reInit,reflow,$(document).foundation or do any of the various supposed solutions: I would love to know.
perhaps I could have done something different but if you look at my code I keep state to one component, I init my js plugins in componentDidMount - as far as i know this is what i am supposed to do. thanks
I tried many libraries/solutions including ionic-scroll but it doesn't work out. I need something which is much similar to instagram/facebook zoom functionality on mobile view.
Every solution prevents vertical scroll if user want to move to second image under the first one.
I am using Angular 1 in my app.
Can someone suggest me so that I can implement the same?
Is it possible to make swipe in angularjs in carousel mode? I mean, many examples of angular swipe contains only one item shown and all others are hidden. Is it possible to make in Angularjs something like that? See an example
Yes and there is already a directive/module called angular-carousel set up for that!
angular-carousel
I've used this on several projects and it works really well. Not only that, but you can preload images as you swipe.
I am very new to all things Angular and have been experimenting with some stuff.
Been playing with UI-Router and with Angular Animations.
So far everything is going to plan, except one thing.
During the transition between pages (my top-most states) the footer area collapses up under the main content and against the navigation.
(I'm also fairly new to css transitions, so my knowledge is limited, but growing)
Is there anything that can be done to prevent this from happening? Maybe have it snag on to the height of whichever state is the tallest? (IE, the one leaving, or the one entering)
(I've tried searching everywhere, but whatever I search for I come up dry. Maybe I'm searching the wrong keywords.)
I have included a plnkr link
Thanks in advanced.