I am looking for a pure JS - slider, which allows me to display a carousel, in which all slides are moved smoothly without intermediate stop. The following features would be important:
autoplay
supports drag,swipe,responsive
no dependency on jQuery
infinite loop
next / before
leightweight filesize
I want it feel like a marquee, it should pause on hover, execute the corresponding action directly when clicking forward or back, and continue again after a hover.
Can anyone here recommend me an appropriate slider?
Try https://swiperjs.com/
it has good documentation and examples and supports frameworks like react.js
Related
I have a question:
Is there a way to control a Lottie animation using a slider in Javascript?
I've tried triggering the animation using a simple button and that works.
I'm using a physical slider (potentiometer) with an Arduino, so the slider gives me an input from 0-1023.
What I want to know is if I can translate the input from the potentiometer to the frames of the animation, so basically being able to play/reverse the animation frames using the slider.
I'm using JohnnyFive Javascript framework to communicate with my Arduino.
Yes, in theory that is perfectly possible. As lottie-web allows you to control exactly what frame is displayed. The tricky part might be first mapping the slider position with the animation frames.
You can get the duration in frames of an animation with getDuration(true). Then you could call the goToAndStop() function as the slider is moved.
You would need an event to be fired every time the slider position changes and catch it within your JavaScript code.
EDIT
You can read more about lottie here:
https://www.npmjs.com/package/lottie-web
I have a grid of div boxes that I will be animating. They will be moving across the screen after a user drags one of the boxes (to re-align into a grid).
Currently I am using JQuery to change the css left and top positions of all of the divs and running this on an interval.
It is laggy if there are more than 50 boxes. How do I make this less laggy? Is there an animation library that is better for this, or do I just need to limit it to 50 boxes?
Image of layout:
You have a few options to optimize the performance.
Newer browsers have requestAnimationFrame that lets the browser take care of the animation timing in order to optimize Javascript animations. Rather than using times to perform the animation, which is what jQuery framework uses, you repeatedly a callback to requestAnimationFrame. The browser will call your function with a progress variable for the animation, and you render the current stage of your animation based on the progress variable. requestAnimationFrame for smarting animating talks about this in depth. Google Closure is the only framework I am aware of that uses requestAnimationFrame however, and it's rather heavyweight.
CSS animations. jQuery offers CSS animation, so do many other frameworks. CSS animations give you hardware acceleration, so the animation is much faster. Unfortunately, CSS animations are relatively new and not yet well supported, so you'll probably end up falling back to Javascript animation on older browsers, depending on the library you use.
Optimize your Javascript. Instead of animation each and every box in the grid, encapsulate each row in a div and animate the entire div instead. That should speed the animation up by a bit. I'm sure there are other ways you can optimize based on your current implementation.
Honestly, I don't know of any library that will make this work more efficiently for you, though there are many libraries out there that are faster than jQuery. The issue isn't just the jQuery, its the fact that you have 50 elements that are all moving/draggable, thus requiring a lot of the browser's resources.
If you can post your code there may be a few things that we could suggest to speed it up slightly.
The two biggest things problems that I can think of are if you added those boxes programmatically and added the handler for each as you added the element to the page, and if you don't store your selectors in variables. Aside from that I would have to see the code.
Have a look at:
jQuery isotope
It has options to allow you to use css3 animations if available or use jQuery / JS animations.
Handy for grid like animation and arrangements.
Some brave soul has managed to add drag and drop to isotope too. http://tyler-designs.com/masonry-ui/ (a bit clunky but works)
There are several ways of increasing the performance. One would be to reduce the amount of DOM elements required for each box. Another is to not animate (and render) boxes outside of the current viewport. Give all boxes that are outside of the viewable area "display: none;" and exclude them before starting a new animation. If you want to go even further you can start to recycle boxes instead of showing and hiding them when the user is scrolling through the page.
This way you will always get the same performance no matter how many boxes you have (above the amount that you can fit in the viewport).
This technique is called UI virtualization. There are several projects that use it like: http://github.com/mleibman/SlickGrid/wiki. It's really useful when you need to render a lot of elements (hundreds, thousands, millions). But it takes quite some work to get it right. And I don't know about any generic working components that are easy to plug in. I tried to find an article that explains it. This is the only thing I could come up with for now, it's for Silverlight though: http://www.silverlightshow.net/items/Virtualization-in-Silverlight-4-RC.aspx
Also try this this plugin for jQuery. Use the regular 'animate' method and it will try to use (hardware accelerated) CSS animations where possible: http://playground.benbarnett.net/jquery-animate-enhanced/
I installed the supersized plugin for wordpress, which is working great. I have set it up as a slideshow to autoplay without control buttons. Still working great.
Now, my client wants to have certain divs (with content) rotate alongside the background image. So, when supersized shows the first image in the slideshow div1 shows on the page. When the slideshow moves to the second slide, div1 needs to go away and show div2, and so on.
Currently, I can do this by hacking into the supersized.js and add a custom function that passes the current slide number inside the nextSlide() function.
Instead of hacking it, though, I would like to hook into it somehow.
Something like: $.supersized.api.currentslide or something similar.
Would this be possible at all?
Thanks!
This example fits with your Answer:
http://www.cirmiz.eu/supersized/
You need to configure a Theme with the init event and api.options.
In this example in the file supersized.shutter.min.js
Requires supersized 3.2.5 ¡important!
I think you are looking for this variable
$.supersized.vars.current_slide
good luck
I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)
I am looking for a javascript based image slideshow solution. Requirements I received:
A few images are added to the slideshow, and it fades one image after another and then starts again from the first image
There should be a navigation in order to manually go to the next / previous image
There should be the option to pause the slideshow and continue again
Can the jquery cycle plugin handle these? Are there any alternatives for the YUI 2 framework?
Jquery Cycle plugin can definiately handle this. Check out this page of examples for more details.
For YUI 3:
http://freshcutsd.com/yui-slideshow/
-Eric
The YUI Carousel component seems like a good fit:
http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
Take a look at the great Lightbox Clones Matrix. It's mainly based around ones which open in a div above your content, but many offer slideshow capabilities. Just use the checkboxes in the top right to filter to what you want.