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.
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.
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.
MooTools offers not only its built-in slider but various add ons
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.
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.
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.
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.