Instructions
The elements
Every functional element is in the magical section. There is the Gallery List and The Gallery Modal.
The Interactions
Interactions are really simple too. They open and close the Modal. The open interaction is in the list item element and the closing interaction is in the modal close wrapper.
The Custom Code
The custom code does the magic. It is in two parts which both should be placed before the </body> tag (the last box in the page settings).
First part is the F'in sweet custom slider with their CMS library. You should check those documents if your planning on using this in a serious project.
The second part is the thing that opens the slider on a right slide. This custom code came from Pixel Geeks tutorial. Check the tutorial for deeper understanding.
You can check and copy both parts from below or page settings. If you have your own classes / selectors / styling just check the bolded parts mach your elements.
<!-- Hosted Library script file on CDN for free -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.8.js"></script>
<script>
(function() {
// create a new Library instance and store it in a variable called "fsSlider"
var fsSlider = new FsLibrary(".slider-data-feed")
// run Slider on our instance
fsSlider.slider({
sliderComponent: ".slider-component",
resetIx: true
})
})();
</script>
<script>
var eq = '';
$('.gallery-list-item').on('click', function(){
eq = $(this).index();
$('.gallery-modal').find('.w-slider-dot:eq('+eq+')').trigger('click');
console.log(eq);
$('body').css('overflow','hidden');
});
$('.gallery-modal-close-wrapper').on('click', function(){
$('body').css('overflow','visible');
});
</script>
