Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save DrOctogon/fe617383ed851f3d269f2384a0daabb0 to your computer and use it in GitHub Desktop.
Save DrOctogon/fe617383ed851f3d269f2384a0daabb0 to your computer and use it in GitHub Desktop.
BeerSlider - use with jQuery and various start parameters
<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>
$.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" ) } )
});
<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>
.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;
}
<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment