Overview 📚
Add this simple js based slider that lets you compare two images side by side. Learn more about it at github.com/pehaa/beerslider
To add this into your project, follow the simple steps and add the custom code into your project or page settings.
Instructions ✍️
1. Add a <div block> for your 'Image Wrapper' class
Add a div-block to your page and give it the class 'Image Wrapper' - this is what will act as the parent for our images and we can use it to set max widths, heights and all the sizing approaches we require. Inside of this is where we are going to add our two images.
2. Add your two images inside of the <Image Wrapper>
Inside of your Image Wrapper div block, you should add two images with the class names 'Image One' & 'Image Two'. We recommend that you export these two images at the same size, but the script will work to make any image sizes work. If alignment is important, be sure that you export images at the same size.
3. Add custom code from page settings
Navigate to the page settings and make sure that you have added all the required custom code into your page before publishing.
The first script should be added into your <head> tag of the custom code:
The second script should be added into your before </body> tag of the custom code:
4. Publish and Slide
Once you have added the scripts you can publish your site and check to see it has worked. If you have any issues please ensure that your class names match exactly with the custom code and as shown in our component example (Grab it at the top of this guide)
