Views FractionSlider installation and usage

Share icon

Fraction Slider is a jQuery plugin which adds a fully customization element slider to your website. Fraction Slider is HTML5 multi-layer and parallax slideshow. Works fine with views fields.

Features

  • Multi-Layer slider
  • Parallax Support
  • Similar to Layerslide

Installation

  1. Install Views Fraction Slider and jQuery Update module.
  2. Now Go to /admin/build/modules, enable module, "Views FractionSlider".
  3. Views FractionSlider is ready to use. Check ready-made Slider block named
    "FractionSlider" Under /admin/structure/block and its settings can be change from
    here at /admin/config/user-interface/fractionslider

Using with Views

1. Select Format as Views Fractionslider.

Format

2. Under Format Style options, check Fields settings at bottom.

Field Settings

3. Change settings for each field and save.

Field Settings

 

For Advanced/Custom Solution

if you are a developer, you can customize slider in any block/page or anywhere.
make structure in given way,

<div class="slider-wrapper">
  <div class="responisve-container">
    <div class="slider">
      <div class="fs_loader"></div>
   
   <div class="slide"><!-- all elements for the first slide --></div>
   <div class="slide"><!-- all elements for the second slide --></div>
   <!-- and so on -->
   
    </div>
  </div>
</div>

add following code to Theme's/Module's js file.

$('.slider-wrapper .slider').fractionSlider({
  'fullWidth': true,
  'controls': true,
  'pager': true,
  'responsive': true,
  'dimensions': "900,400",
  'increase': false,
  'pauseOnHover': true,
  'slideEndAnimation': true
});