How to create thumnail navigation which is swipe enabled? - javascript

I want to create a thumbnail navigation type of stuff which works as equivalent to ROYAL SLIDER thumbnail navigation as here
it swipe enabled I'm using angular i tried using angular-gesture to achieve the same but its not adjusting with the device width you can see my implementation here. when swiped will navigate, i tried creating 3 > 3 > 2 thumbs but there is empty space and it should run on mobile devices.
Please help or guide me what can be done further
Thanks

Related

How do I make this vertical carousel with touch and scroll support?

I need to build a vertical carousel like the one in the image, where I'm able to scroll and use touch.
When the active slide is clicked, the user is redirected else it scrolls to to the element.
Any tips for libraries that can help me achieve this?
Thanks in advance!
I ended up making the carousel myself following this tutorial:
How to build a carousel from scratch in vanilla js
It uses CSS3 animations to move the elements and javascript to swap classes to trigger the animations.

What do i need to create single page website like this?

I found this website and impressed on it https://kvellhome.com/
what technology do I need if I want to create a website like that
Is it Ajax? (I tried to remove some article but it can reload itself when I changed article back)
HTML5 history (I found that it can reach by direct link)
Ok, I think this can guide you to the right direction.
1- the homepage is a simple landing page that usese some animations to change colors and display text.
2 - when clicking on discover, it slides on the right and initialize a second slider that uses the projects's name as navigation dots (can easily be done using css pseudo elements using data attribute as content)
3 - you click on the project itself and it load a parallax page for that specific project.
Menu | contacts | about are pretty simple, they are pages on their own.
Some libraries you could possibly use:
fullscreenjs (to create the fullscreen pages and sliders. the home page can be the first slider and then on the second page you initialize a slider inside a slider (so that the animation to the right looks like the one on the website you provided)
animatecss to animate stuff
parallax for all the parallax effects
I think this is personal preference, but if I had to do a website like that, I will tackle it this way. Hope it helps

scrollbar insde one onther scroll bar

Hi to all,
i was making a slider where i want some thing like below image.
more in details vise in a picture
actualy one of my slider slide got a scroll bar .where i want it as when the user first scroll the page first the slider scoller should scroll and then the slider scroller end ,the page scroller should work normaly.
i have no idea how to do it in jquery but seen those kind of effect in many sites.
please help me and thanks in advance

Flexslider change finger swipe angle

I am using flexslider and Joomla to make a mobile swipe responsive CMS site, however the swipe angle required to change from slide to slide is too sensitive. More often than not vertical swiping through the content will activate a horizontal slide. Anyone worked with this and/or have any clue where in the js script i can change the limits of horizontal swiping? Thanks in advance!!
I recently encountered the same problem and was able to resolve it with this fix:
https://github.com/wearebully/JS-Snippets/tree/master/Flexslider%20Touch%20Sensitivity%20Fix
Hope it helps.

How can I create a 1 to 1 Swipe Carousel in jQuery

I am trying to custom build a 1 to 1 movement jQuery carousel. I would like for it to work just like SwipeJS does where the carousel moves as you slide your finger.
Unfortunately I can't use the wonderful SwipeJS as this project requires some deep customization of the carousel that SwipeJS wont allow.
I was just wondering if someone could point me in the right direction of how to get started with a iOS carousel that moves as your finger moves on the screen (in jQuery).
UPDATE: This was my attempt http://jsfiddle.net/atlchris/cTt6c/ but it is not working as I had hoped.
UPDATE 2: I think I am getting closer: http://jsfiddle.net/atlchris/cTt6c/1/ This works better.
I think I have it figured out: http://jsfiddle.net/atlchris/cTt6c/2/
1 to 1 movement via jQuery!

Categories