Colorizing active carousel cell using OxyExtras in Oxygen

OxyExtras‘ Carousel Builder module integrates Flickity as a native component with a ton of options including being able to select ACF/Meta Box Gallery or Easy Posts or Repeater or WooCommerce components/product gallery.

This tutorial provides the steps to set black & white background color of all carousel cells except the selected i.e, in-view (mainly) one when using OxyExtras.

Step 1

Install and activate OxyExtras.

Go to Oxygen → OxyExtras → License, paste your license key and activate the plugin.

Go to Settings tab, tick “Carousel Builder” and save.

Step 2

Edit your Template/Page with Oxygen.

Here’s the sample Structure by the end of this step:

1-click copy and paste Hydrogen code is provided near the end.

Add a Section and inside that a Carousel Builder component.

In this example we shall add a static carousel with hardcoded cells with each cell being a div having a unique background image and text.

Carousel content: Custom elements (.cell)

Cells → Cell width: 60%
Space between cells: 10px

Carousel → Group cells by: % of carousel viewport

Add a Div inside the Carousel Builder. Set a background image. Image Overlay Color: rgba(0,0,0,0.26).

Set it a class of cell.

Set Horizontal Item Alignment to Center and Vertical Item Alignment to Middle since we want the heading (to be added next) inside the Div to be centered.

Background Size: cover
Background Repeat: no-repeat
Left: 50%
Top: 50%

Padding: 100px at top and bottom

Add a Heading inside the Div and change its text to say, Slide 1. You may want to change the tag to h2/h3/h4 as needed.

Select the Div and duplicate it.

Change the background image and the heading text.

Repeat for as many slides/cells as needed.

1-click copy and paste Hydrogen code

With either Hydrogen Pack or Hydrogen Paste you can copy the code below and paste in your Oxygen editor to paste the Carousel Builder from my test page.

Note: You will need to change the URLs of the background images for the Divs.

eyJzb3VyY2UiOiJodHRwczovL294eWdlbi5sb2NhbCIsImNvbXBvbmVudCI6W3siaWQiOjMsIm5hbWUiOiJveHktY2Fyb3VzZWwtYnVpbGRlciIsIm9wdGlvbnMiOnsiY3RfaWQiOjMsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiItY2Fyb3VzZWwtYnVpbGRlci0zLTExMSIsIm9yaWdpbmFsIjp7Im94eS1jYXJvdXNlbC1idWlsZGVyX2Nhcm91c2VsX3R5cGUiOiJjdXN0b20iLCJveHktY2Fyb3VzZWwtYnVpbGRlcl9zbHVnX2NlbGxfbWFyZ2luX3JpZ2h0IjoiMTAiLCJveHktY2Fyb3VzZWwtYnVpbGRlcl9zbHVnX2NlbGxfd2lkdGgiOiI2MCIsIm94eS1jYXJvdXNlbC1idWlsZGVyX21heWJlX2dyb3VwIjoicGVyY2VudCIsIm94eS1jYXJvdXNlbC1idWlsZGVyX21heWJlX2ZhZGUiOiJmYWxzZSJ9LCJuaWNlbmFtZSI6IkNhcm91c2VsIEJ1aWxkZXIgKCMzKSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImNoaWxkcmVuIjpbeyJpZCI6NCwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjQsImN0X3BhcmVudCI6Mywic2VsZWN0b3IiOiJkaXZfYmxvY2stNC0xMTEiLCJuaWNlbmFtZSI6IkRpdiAoIzQpIiwiY2xhc3NlcyI6WyJjZWxsIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IiIsIm9yaWdpbmFsIjp7ImFsdCI6IlBvcnQgTGFrZSBBcmNoaXRlY3R1cmUgVmFjYXRpb25zICAtIExOTE5MTiAvIFBpeGFiYXkiLCJiYWNrZ3JvdW5kLWltYWdlIjoiaHR0cHM6Ly9veHlnZW4ubG9jYWwvd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDkvcG9ydC1sYWtlLWFyY2hpdGVjdHVyZS12YWNhdGlvbnMtNjU4NzEyOS5qcGciLCJiYWNrZ3JvdW5kLXBvc2l0aW9uLWxlZnQtdW5pdCI6IiUiLCJiYWNrZ3JvdW5kLXBvc2l0aW9uLXRvcC11bml0IjoiJSIsIm92ZXJsYXktY29sb3IiOiJyZ2JhKDAsMCwwLDAuMjYpIn19LCJkZXB0aCI6NSwiJCRoYXNoS2V5Ijoib2JqZWN0OjI3NyIsImNoaWxkcmVuIjpbeyJpZCI6MTYsIm5hbWUiOiJjdF9oZWFkbGluZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjE2LCJjdF9wYXJlbnQiOjQsInNlbGVjdG9yIjoiaGVhZGxpbmUtMTYtMTExIiwib3JpZ2luYWwiOnsidGFnIjoiaDIiLCJjb2xvciI6IiNmZmZmZmYifSwibmljZW5hbWUiOiJIZWFkaW5nICgjMTYpIiwiY3RfY29udGVudCI6IlNsaWRlIDEiLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2V9LCIkJGhhc2hLZXkiOiJvYmplY3Q6MzMyMiJ9XX0seyJpZCI6NywibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjcsImN0X3BhcmVudCI6Mywic2VsZWN0b3IiOiJkaXZfYmxvY2stNy0xMTEiLCJuaWNlbmFtZSI6IkRpdiAoIzcpIiwiY2xhc3NlcyI6WyJjZWxsIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IiIsIm9yaWdpbmFsIjp7ImJhY2tncm91bmQtaW1hZ2UiOiJodHRwczovL294eWdlbi5sb2NhbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8wOS9maWVsZC1tb3JuaW5nLXN1bnJpc2UtZGF3bi1uYXR1cmUtNjU3NDQ1NS5qcGciLCJhbHQiOiJGaWVsZCBNb3JuaW5nIFN1bnJpc2UgRGF3biBOYXR1cmUgIC0gTGFncmFuZ2VIZXJ2w6kgLyBQaXhhYmF5Iiwib3ZlcmxheS1jb2xvciI6InJnYmEoMCwwLDAsMC4yNikifX0sImRlcHRoIjo1LCIkJGhhc2hLZXkiOiJvYmplY3Q6Mjc4IiwiY2hpbGRyZW4iOlt7ImlkIjoxOCwibmFtZSI6ImN0X2hlYWRsaW5lIiwib3B0aW9ucyI6eyJjdF9pZCI6MTgsImN0X3BhcmVudCI6Nywic2VsZWN0b3IiOiJoZWFkbGluZS0xOC0xMTEiLCJvcmlnaW5hbCI6eyJ0YWciOiJoMiIsImNvbG9yIjoiI2ZmZmZmZiJ9LCJuaWNlbmFtZSI6IkhlYWRpbmcgKCMxOCkiLCJjdF9jb250ZW50IjoiU2xpZGUgMiJ9LCIkJGhhc2hLZXkiOiJvYmplY3Q6MzMyMiJ9XX0seyJpZCI6OSwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjksImN0X3BhcmVudCI6Mywic2VsZWN0b3IiOiJkaXZfYmxvY2stOS0xMTEiLCJuaWNlbmFtZSI6IkRpdiAoIzkpIiwiY2xhc3NlcyI6WyJjZWxsIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IiIsIm9yaWdpbmFsIjp7ImJhY2tncm91bmQtaW1hZ2UiOiJodHRwczovL294eWdlbi5sb2NhbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8wOS9sYWtlLWpldHR5LXN3YW5zLWJpcmRzLXdhdGVyZm93bHMtNjU3NjQ0Ni5qcGciLCJhbHQiOiJMYWtlIEpldHR5IFN3YW5zIEJpcmRzIFdhdGVyZm93bHMgIC0gTmlja3lQZSAvIFBpeGFiYXkiLCJvdmVybGF5LWNvbG9yIjoicmdiYSgwLDAsMCwwLjI2KSJ9fSwiZGVwdGgiOjUsIiQkaGFzaEtleSI6Im9iamVjdDoyNzkiLCJjaGlsZHJlbiI6W3siaWQiOjIwLCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjoyMCwiY3RfcGFyZW50Ijo5LCJzZWxlY3RvciI6ImhlYWRsaW5lLTIwLTExMSIsIm9yaWdpbmFsIjp7InRhZyI6ImgyIiwiY29sb3IiOiIjZmZmZmZmIn0sIm5pY2VuYW1lIjoiSGVhZGluZyAoIzIwKSIsImN0X2NvbnRlbnQiOiJTbGlkZSAzIn0sIiQkaGFzaEtleSI6Im9iamVjdDozMzIyIn1dfSx7ImlkIjoxMSwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjExLCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTExLTExMSIsIm5pY2VuYW1lIjoiRGl2ICgjMTEpIiwiY2xhc3NlcyI6WyJjZWxsIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IiIsIm9yaWdpbmFsIjp7ImJhY2tncm91bmQtaW1hZ2UiOiJodHRwczovL294eWdlbi5sb2NhbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8wOS9ydWlucy1zdW5zZXQtdHJhdmVsLW91dGRvb3JzLTY1NjQ1MTYuanBnIiwiYWx0IjoiUnVpbnMgU3Vuc2V0IFRyYXZlbCBPdXRkb29ycyAgLSBwYXBhemFjaGFyaWFzYSAvIFBpeGFiYXkiLCJvdmVybGF5LWNvbG9yIjoicmdiYSgwLDAsMCwwLjI2KSJ9fSwiZGVwdGgiOjUsIiQkaGFzaEtleSI6Im9iamVjdDoyODAiLCJjaGlsZHJlbiI6W3siaWQiOjIyLCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjoyMiwiY3RfcGFyZW50IjoxMSwic2VsZWN0b3IiOiJoZWFkbGluZS0yMi0xMTEiLCJvcmlnaW5hbCI6eyJ0YWciOiJoMiIsImNvbG9yIjoiI2ZmZmZmZiJ9LCJuaWNlbmFtZSI6IkhlYWRpbmcgKCMyMikiLCJjdF9jb250ZW50IjoiU2xpZGUgNCJ9LCIkJGhhc2hLZXkiOiJvYmplY3Q6MzMyMiJ9XX0seyJpZCI6MTMsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxMywiY3RfcGFyZW50IjozLCJzZWxlY3RvciI6ImRpdl9ibG9jay0xMy0xMTEiLCJuaWNlbmFtZSI6IkRpdiAoIzEzKSIsImNsYXNzZXMiOlsiY2VsbCJdLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIiLCJvcmlnaW5hbCI6eyJiYWNrZ3JvdW5kLWltYWdlIjoiaHR0cHM6Ly9veHlnZW4ubG9jYWwvd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDkvbmF0dXJlLWJlYWNoLW91dGRvb3JzLWV4cGxvcmF0aW9uLTY1NjU0OTkuanBnIiwiYWx0IjoiTmF0dXJlIEJlYWNoIE91dGRvb3JzIEV4cGxvcmF0aW9uICAtIEVMRzIxIC8gUGl4YWJheSIsIm92ZXJsYXktY29sb3IiOiJyZ2JhKDAsMCwwLDAuMjYpIn19LCJkZXB0aCI6NSwiJCRoYXNoS2V5Ijoib2JqZWN0OjI4MSIsImNoaWxkcmVuIjpbeyJpZCI6MjQsIm5hbWUiOiJjdF9oZWFkbGluZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjI0LCJjdF9wYXJlbnQiOjEzLCJzZWxlY3RvciI6ImhlYWRsaW5lLTI0LTExMSIsIm9yaWdpbmFsIjp7InRhZyI6ImgyIiwiY29sb3IiOiIjZmZmZmZmIn0sIm5pY2VuYW1lIjoiSGVhZGluZyAoIzI0KSIsImN0X2NvbnRlbnQiOiJTbGlkZSA1In0sIiQkaGFzaEtleSI6Im9iamVjdDozMzIyIn1dfSx7ImlkIjoxNSwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjE1LCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTE1LTExMSIsIm5pY2VuYW1lIjoiRGl2ICgjMTUpIiwiY2xhc3NlcyI6WyJjZWxsIl0sImFjdGl2ZXNlbGVjdG9yIjoiY2VsbCIsImN0X2NvbnRlbnQiOiIiLCJvcmlnaW5hbCI6eyJiYWNrZ3JvdW5kLWltYWdlIjoiaHR0cHM6Ly9veHlnZW4ubG9jYWwvd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDkva2lkLWdpcmwtcGxheWluZy1jaGlsZC1iYWJ5LTY1NjU0NjEuanBnIiwiYWx0IjoiS2lkIEdpcmwgUGxheWluZyBDaGlsZCBCYWJ5ICAtIEp1cGlsdSAvIFBpeGFiYXkiLCJvdmVybGF5LWNvbG9yIjoicmdiYSgwLDAsMCwwLjI2KSJ9fSwiZGVwdGgiOjUsIiQkaGFzaEtleSI6Im9iamVjdDoyODIiLCJjaGlsZHJlbiI6W3siaWQiOjI2LCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjoyNiwiY3RfcGFyZW50IjoxNSwic2VsZWN0b3IiOiJoZWFkbGluZS0yNi0xMTEiLCJvcmlnaW5hbCI6eyJ0YWciOiJoMiIsImNvbG9yIjoiI2ZmZmZmZiJ9LCJuaWNlbmFtZSI6IkhlYWRpbmcgKCMyNikiLCJjdF9jb250ZW50IjoiU2xpZGUgNiJ9LCIkJGhhc2hLZXkiOiJvYmplY3Q6MzMyMiJ9XX1dLCJkZXB0aCI6MSwiJCRoYXNoS2V5Ijoib2JqZWN0OjIwMyJ9XSwiY2xhc3NlcyI6eyJjZWxsIjp7Im9yaWdpbmFsIjp7ImZsZXgtZGlyZWN0aW9uIjoiY29sdW1uIiwiZGlzcGxheSI6ImZsZXgiLCJqdXN0aWZ5LWNvbnRlbnQiOiJjZW50ZXIiLCJhbGlnbi1pdGVtcyI6ImNlbnRlciIsInRleHQtYWxpZ24iOiJjZW50ZXIiLCJwYWRkaW5nLXRvcCI6IjEwMCIsInBhZGRpbmctYm90dG9tIjoiMTAwIiwiYmFja2dyb3VuZC1zaXplIjoiY292ZXIiLCJiYWNrZ3JvdW5kLXJlcGVhdCI6Im5vLXJlcGVhdCIsImJhY2tncm91bmQtcG9zaXRpb24tbGVmdC11bml0IjoiJSIsImJhY2tncm91bmQtcG9zaXRpb24tbGVmdCI6IjUwIiwiYmFja2dyb3VuZC1wb3NpdGlvbi10b3AtdW5pdCI6IiUiLCJiYWNrZ3JvdW5kLXBvc2l0aW9uLXRvcCI6IjUwIn19fSwiY29sb3JzIjp7fX0=

Step 3

Add the following in a Stylesheet at Manage → Stylesheets:

.oxy-carousel-builder .flickity-slider > div:not(.is-selected) {
  background-color: rgba(255,255,255,1);
  background-blend-mode: luminosity;
}

This will affect all the Carousel Builder instances.

Replace .oxy-carousel-builder with the ID (Ex.: #-carousel-builder-3-111) to limit this to a specific instance.

Reference

https://stackoverflow.com/a/65124277/778809