Skip to content
A framer.js library for creating sliders.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
LICENSE.md
README.md
slider.min.js

README.md

Slider Library for framer.js

When I started prototyping with framer.js I really struggled to recreate the interaction pattern of a slider in the early stages. So I wrote this library with some useful functions implemented and to easily set up mutliple sliders with a single line of code.

Install the library

Simply copy the min.js file in your project folder and link it with the exact filepath in your index.html code in the head area. Now you are able to use all the supported functions in your current project.

<script src="slider.min.js"></script> //exact pathfile

Slider(x, y, width, height, easing-curve)

To initialize a new slider, simply write the following line. You can define the position and the dimension of the slider and the easing curve for the transition.

slider1 = new Slider(50,50,200,200,"spring(100,50,0)");

slider.addSlide(layer)

The slider can handle sets of layers or single layers for example to create an image gallery. To add content to your slider simply use the addSlide method.

slider1.addSlide(picture1);

slider.showPagination()

Sometimes it is useful to show the user how many slides the slider contains, so the library comes with the possibilty to enable a pagination. Per default the pagination is hidden.

slider1.showPagination();

slider.autoPlay(time)

Sliders can also be automated by an auto play, where you can define the speed of the slide change.

slider1.autoPlay(1.5);

slider.dragControl()

To control the slider you can use the method above in order to interact with a drag on desktop devices or a swipe on mobil devices. Simply call the function dragControl().

slider1.dragControl();

slider.nextSlide(); slider.prevSlide();

If you want to trigger the slider and interact with it on specific user inputs, you can simply use the following methods to change the sliders manually.

prevButton.on(Events.Click,slider1.prevSlide());
nextButton.on(Events.Click,slider1.nextSlide());
You can’t perform that action at this time.