BeerSlider - use with jQuery and various start parameters

beerslider-use-with-jquery-and-various-start-parameters.markdown

BeerSlider - use with jQuery and various start parameters

A Pen by Paulina Hetman on CodePen.

License.

index.html

<div id="slider1" class="beer-slider" data-beer-label="before" data-start="25">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/dogs-before.jpg" alt="Dogs - before, unprocessed image">
	<div class="beer-reveal" data-beer-label="after">
	  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/dogs-after.jpg" alt="Dogs - after, processed photo">
	</div>
</div>
<div id="slider2" class="beer-slider beer-slider-wlabels" data-beer-label="before" data-start="75">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/original-baltic.jpg" alt="Original baltic seashore">
	<div class="beer-reveal" data-beer-label="after">
	  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" alt="Baltic seashore - processed image Warmsphere preset">
	</div>
</div>

script.js

  $.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( "start" ) } )
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

style.css

.beer-slider {
  font-family: Montserrat;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

body {
  max-width: 720px;
  margin: 2rem auto;
}

styles

<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet" />