Transitions, Effects

Transitions describe the numerous effects available for the switch from one slide to the next one. One standard is supported by all sliders: Simply push one image out of the viewfield while the next one follows. From here, slider developers have a vast number of options due to CSS3 and jQuery. At the very top ranges the WOW Slider with collages, domino effect, rotation, blur, page flip, chessboard squares, fade in/fade out, stacks and even cubic 3d rotation.

image11.jpeg

Wow Slider offers the widest palette of transition effects

Using these effects raises the question of benefit and impression for the website visitors. Reputable shops might want to avoid cheap showmanship to deliver a professional image. Web profiles of food photographers or travel report bloggers might get away with some more eye candy. They should have a closer look at WOW Slider , Flux Slider and the slimmer Nivo Slider and Cycle2 , while the majority of site owners will be content with basic transition solutions of all other sliders.

What is Easing?

Slideshow easing describes a transition effect with dynamic speed. The animation starts slowly, accelerates towards the apex and slows down again at the end, which creates the impression of a very smooth animation.

ntegration and Programming

Although sliders are a frontend feature, a look behind the curtain is just as important. The quality of the source code and the flexibility for programmatic extensions can be crucial for a fast and stable integration into your system.

Many of the popular sliders offer convenient add on packages for CMS or at least an elaborated setup documentation, e.g. WOW Slider , FlexSlider , bxSlider , Nivo Slider , Slick . Special plug ins like WordPress’ Meta Slider even combine multiple slider products in one extension, thus allowing for some experimental elbowroom.

But even exotics not listed here can be easily integrated into most platforms. jQuery does the trick – once the JavaScript library is loaded and the product fulfills a few requirements, the experts from Codingpeople can integrate almost any suggested technology.

Of course there are also sliders that work without jQuery. Just ask us, Codingpeople finds and integrates products based on other frameworks like MooTools or Prototype.

image12.png

MooTools offers not only its built-in slider but various add ons

 

image13.png

Prototype’s slider selection is somewhat limited, but the Prototype Carousel is highly configurable

The peak of slider integration is the utilization of Callback APIs, an interface that allows the website code to communicate with the slider and trigger additional actions, e.g. show some text boxes or redirect to a different page once the slideshow is finished.

Most sliders provide such an API out-of-the-box, savvy developers can use jQuery or other JavaScript libraries to add this functionality in case it is missing.

What is an API?

Using an API (Application Programming Interface) one program can examine or control key features of another one. With slider Callback APIs the surrounding website can, for example, detect when a slide switch occurs and is able to react to it, maybe display a caption or trigger a second slider.

Size and Speed

When integrating the slider into the homepage, file size and loading time are aspects that can influence your visitors’ bounce rate. If loading the page takes longer than four seconds, many impatient users are already gone. However, with modern high speed connections slider size gets less and less important, especially considering the large image files the slider loads.

Usually JavaScript components’ code is also being minified, that means, by code optimizing and removal of unnecessary fragments the source code is being reduced to at least half of its original size. This way, the fully featured FlexSlider manages to get under 20 KB which is about as much as a mid-sized JPG with moderate quality.

image14.png

Basic slider functionality in 1 KB – ResponsiveSlides

 

But why waste memory and download time if you don’t need all these features? Just use a lightweight slider then: The 1 KB large ResponsiveSlides is accordingly limited in its functionality and configuration: No carousel, no Callback API, only one image at the same time and CSS3-only transitions.

image15.png

With 2 KB jQuery Slideshow offers callbacks and transition easing

 

A similar frugality is displayed by jQuery Slideshow . Its 2 KB code contains two transitions, easing, pagination and a simple callback when slides are switching.