Javascript Tinder like swiping but in a carousel - javascript

Im trying to create a component on my web app. Which shows items in a caroussel where you can remove or like those items with swiping to left or right. Kinda like Tinder but difference is tinder are card stacks i want them in a caroussel.
I tried many different options none seems to be working. Any idea how i can achieve this?

Related

Bootstrap 3 carousel buttons on top right

I found this article Bootstrap 3 Carousel with buttons which contains the link to https://www.codeply.com/go/bp/113737.
Which is almost, and i would say exactly that im trying to do with my custom carousel.
Im trying to make a carousel which has the button on top right,
something like this
https://imgur.com/a/rBCF9kh
So as you can see there are three buttons Lumpia Longanisa and Tocino
So when the second button is clicked, Longanisa, it will toggle with new image, the same goes for Tocino and so forth, just like a normal carousel.
I'm quite new to bootstrap, and im having a hard time applying the same scenario on the post i found which seems to use an older version of bootstrap.
So if someone could lend a hand please, i would appreciate it and like how to apply the javascript or where to in case.
Or if not bootstrap carousel, maybe a different slider approach can be helpful as well.
Thank you in advance for guiding me.
I tried the one with this post Bootstrap 3 Carousel with buttons using this guide https://www.codeply.com/go/bp/113737 but im not sure if its working with the current version of bootstrap, or if im inputting the correct $('#myCarousel').carousel(); somewhere

mobile swipe navigation examples

Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu

Ember transitions in realtime

We use ember 1.8 along with https://github.com/billysbilling/ember-animated-outlet to make the transitions on the application look more like other mobile apps ,
However now we need this to work more like the "Tumblr" app where when an item on list is swiped the next view with details will slide over in realtime based on the swiping pattern ,etc that is more you swipe the more of the next view will appear and if you slide on opposite direction you stay on the same page.
Is it possible to do this in Ember or this kind of transition is not possible with our current app?
Please let me know if the question is not worded correctly.
We wanted to be sure this is achieveable in the ember before we try that route.

Off Canvas Layout For Twitter BootStrap With Multilevel Menu

I want to use this http://getbootstrap.com/examples/offcanvas/ with the sidebar as my main navigation.
But I need a navigation with two levels, and the second level has to slide-in like the first level. I was thinking something like this: http://www.marcandrew.net/off-canvas-infinity-push/
Somebody know how to do it?

Multilevel Navigation Tabs

I have a very complex navigation menu I am trying to create, it looks something like this:
Basically it's a 3 level navigation bar that has 2 parent tabs, when you hover over any of the tabs you should be able to see its child navigation levels and when you hover out you see what you are currently on.
Another problem is that the two parent tabs have two different color themes, parent tab 1 being blue with all its child levels blue and the parent tab 2 is green etc..
I'm very confused about how I should do this, maybe nested divs?
Are there any plugins that will might my life a lot easier?
Many samples are avaialble in internet but you need to modify according to your requirement.
Some examples are avialble:
http://jsfiddle.net/elusien/PayFw/8/
http://snippets.aktagon.com/snippets/200-Really-simple-hover-menus-with-jQuery
http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/#
Something like jQuery Drop Line Tabs might work for this situation. It's a jQuery plugin that allows for the multi-level navigation that you have in your question's image. Here's a link to the plugin (and there is a live demo on that page, as well,) if you would like to check it out: jQuery Drop Line Tabs.
If that doesn't work out... searching around online is bringing up a lot of menu plugin tutorials.
Hope that at least gets you pointed in a plugin direction for this...!

Categories