Some simple tips to customize the Composite Elements that were added as an Add-on for Oxygen Builder 3.7.
The Flip Box element
Just add this CSS if you want to have some perspective:
.oxel_flipbox {
perspective: 1000px
}The Dynamic Slider element
The dynamic slider use the Swiper library and it's loaded from a CDN :
You can copy these files and load them locally if you prefer (with My Custom Functionality plugin or Advanced Scripts ).
And to easily add some custom animations, you can also check my other tutorial about how to use GSAP with Swiper.
The Horizontal Divider element
By default, the icon is centered. If you want to change the position of the icon, you have to edit the Left Line or Right Line element, select the ID, and set a width.
For example : calc(100% - 200px)
There is also another method, that uses only one Div instead of three : Nice and easy way to create a text divider
TITLE
TITLE
Image Comparison element
By default, you have to click on the icon if you want to move the handle to the right or left.
Usually, in most Image Comparision , we can click anywhere on the image and the handle will directly go to that position.
Here is how to do it :
Select the Image Comparison Code element, and replace this function :
by this code :
// Setup variables
var mouseX = 0;
var moveIcon;
jQuery('.oxel_image_comparison').on('mousedown', function(e) {
if( !window.angular ) {
mouseX = e.pageX;
jQuery('.oxel_image_comparison__icon').addClass('oxel_image_comparison__icon--dragging');
if( jQuery('.oxel_image_comparison__icon--dragging').length > 0 ) {
moveIcon = setInterval(move_icon_function, 10);
}
}
});The Hover Scrolling Image element
Check this tutorial if you want to learn more about how it is made, so you can easily customize the effect.