Git Product home page Git Product logo

beerslider's Introduction

Travis (.org) Codecov Github file size

BeerSlider

A vanilla JavaScript accessible before-after slider

Demo

You can find the demo here.

How?

Installation

The dist folder contains the ready for production minified files: BeerSlider.js and BeerSlider.css

<head>
  ...
  <link rel="stylesheet" href="dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="dist/BeerSlider.js"></script>
  <script>
    new BeerSlider(document.getElementById('slider'));
  </script>
</body>

You can also use the cdn solution

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
  <script>
    new BeerSlider(document.getElementById('slider'));
  </script>
</body>

npm:

npm install beerslider

Usage:

The basic markup is:

<div id="slider" class="beer-slider" data-beer-label="before">
  <img src="../demo-assets/images/dogs-before.jpg" alt="">
  <div class="beer-reveal" data-beer-label="after">
    <img src="../demo-assets/images/dogs-after.jpg" alt="">
  </div>
</div>

The data-beer-labels are optional, you can leave them empty or do not add them at all.

To activate the slider add the following:

new BeerSlider(document.getElementById('slider'));

Customization

You can initiate BeerSlider with some options, the available options are:

{
  // start value
  start: '50',
  // prefix 
  prefix: 'beer'
}

Use with jQuery or Zepto

If you use jQuery or Zepto in your project and have a few before-after sliders on your page, you can do something like that:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').BeerSlider({start: 25});
</script>

or:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').each( (function( index, el ) {
    $(el).BeerSlider({start: $(el).data('beer-start')})
  });
</script>

with:

<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="25">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>
<div id="beer-slider2" class="beer-slider" data-beer-label="before" data-beer-start="75">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>

A Codepen demo using jQuery is available here, and Zepto here.

beerslider's People

Contributors

pehaa avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.