In this tutorial, we'll look at creating a custom carousel slider. This can be useful to showcase your posts, products and custom post types with Owl Carousel using a repeater.
We will create the carousel with a repeater element as this way we can reuse the carousel.
Create a new snippet - I named it scripts enqueue for my better understanding. I had the owl.carousel.min.css, owl.theme.default.min.css & owl.carousel.min.js uploaded to the directory /wp-content/snips/ this can be downloaded from owl carousel github page linked above.
/* Owl Start */
wp_enqueue_style( 'owlcore', '/wp-content/snips/owl.carousel.min.css' );
wp_enqueue_style( 'owltheme', '/wp-content/snips/owl.theme.default.min.css' );
wp_enqueue_script( 'owljs', '/wp-content/snips/owl.carousel.min.js',array( 'jquery' ),'2.3.4',true);
/* Owl End */
For me I created a Repeater with the following elements. All the elements were wrapped inside a Div element and all elements in the div is stacked vertically with 100% width.
Add a class of owl-carousel (or a choice of yours) to the element
Under query option I manually put up the queries. For better understanding you can use Sridhar's Guide - https://wpdevdesign.com/manual-query-params-in-oxygen/
post_type=post&posts_per_page=6&no_found_rows=true&nopaging=trueIn the layout option make child elements stack horizontally with top vertical alignment and center horizontal alignment.
Make width 100%
In the code block just paste the below javascript
jQuery(".owl-carousel > .oxy-repeater-pages-wrap").remove();
jQuery('.owl-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
loop: true,
responsive: {
// breakpoint from 0 and up
0: {
items: 1,
nav: true,
margin: 10,
slideBy: 1,
rewind: false,
},
// breakpoint from 500 and up
500: {
items: 2,
nav: true,
margin: 10,
slideBy: 1,
rewind: false,
},
// breakpoint from 768 and up
768: {
items: 2,
margin: 10,
nav: true,
slideBy: 1,
rewind: false,
},
// breakpoint from 1024px and up
1024: {
items: 3,
margin: 20,
nav: true,
slideBy: 1,
rewind: false,
// autoplay: true,
// autoplaySpeed: 1500
},
// breakpoint from 1440px and up
1440: {
items: 4,
margin: 20,
nav: true,
slideBy: 1,
rewind: false,
// autoplay: true,
// autoplaySpeed: 1500
}
}
});To explain the above the first set of code is to remove repeater navigation which is unnecessary in this stance. The Next and final code initializes owl carousel.
When adding the javascript note that you should change the word owl-carousel to the name you used in the repeater.
Next add the following css in the css section of the code block.
.owl-theme .owl-nav {
margin-top: 10px;
outline: none;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
position: absolute;
padding: 10px !important;
top: 38%;
line-height: 1;
outline: none;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
background: none;
color: #404040;
outline: none;
}
.owl-carousel .owl-nav .owl-prev span,
.owl-carousel .owl-nav .owl-next span {
font-size: 40px;
outline: none;
color: #fff;
}
.owl-carousel .owl-nav .owl-prev {
left: -10px;
}
.owl-carousel .owl-nav .owl-next {
right: -10px;
}
.owl-carousel .oxy-repeater-pages-wrap {
display: none;
}Change the CSS Values as necessary.
The final result is shared as a picture below:
The carousel script can also be customized. It's just incredibly easy modify the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
For modifications based on classes visit: https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
If you have blocks library enabled you can use the below shortcode to do all the above without needed to manually do much edits except edit the post query as necessary. The below would enqueue the Owl Carousel script in code block import necessary css and javascript along with the repeater.
[Owl Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using owl carousel as it is the best option to implement as it has a very small footprint and is easy to implement.Read MoreFlickity Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using flickity as it is the best option to implement as it has a very small footprint and is easy to implement.Read MoreConfiguring Burp Suite With Android Nougat 2020
From Android Nougat the Burp Suite CA Certificate no longer works installed no longer works. Here is a guide to solve the problemRead MoreOxygen dominating DIVI! Why I made the shocking switch?
Oxygen is a great plugin to use but I was a DIVI fanboy learn why I switched from DIVI to Oxygen and what benefits I found from switching the page builders.Read More6 Tips to a Great Web Portfolio
Having a great web portfolio is a must, even though you may have a CV / Resume, a portfolio helps the most. Read my tips to make a great web portfolio .Read MoreBetter than Canva: GlorifyApp (No. 1 Alternative)
Canva is a great tool but what if there was something better Glorifyapp is more appealing to every designers dream.Read MoreBackdoor Attack - 60 Million WordPress Sites at Risk
According to WordPress, over 60 million people have chosen the software and they are vulnerable to backdoor attack. Take precautionary steps now.Read MoreOxygen + Gutenberg Blocks - A Simple Integration
Oxygen Builder's integration with Gutenberg blocks for better output in the fronted made with oxygen template system.Read MoreExcel in Workplace
In an office, the best way to survive is being good with Microsoft Excel which gives an edge in the workplace and helps stand out from the crowd.Read MoreQuadmenu an affordable premium WordPress Mega menu plugin
QuadMenu is the best powerful WordPress mega menu plugin to amplify your theme to give your users a great experience with its responsiveness and reliability.Read More
]If you prefer other carousels over flickity you can try the below:
In this tutorial, we'll look at creating a custom carousel slider. This can be useful to showcase your posts, products and custom post types with flickity using a repeater.
We will create the carousel with a repeater element as this way we can reuse the carousel.
Create a new snippet - I named it scripts enqueue for my better understanding. I had the flickity.min.css & flickity.pkgd.min.js uploaded to the directory /wp-content/snips/
/*Carousel Start */
wp_enqueue_style( 'flickcore', '/wp-content/snips/flickity.min.css' );
wp_enqueue_script( 'flickjs', '/wp-content/snips/flickity.pkgd.min.js',array( 'jquery' ),'2.2.1',true);
/*Carousel End */
For me I created a Repeater with the following elements. All the elements were wrapped inside a Div element as we need a div element to declare it as a carousel cell needed for the carousel to work well.
Add a class of flick (or a choice of yours) to the element
Under query option I manually put up the queries. For better understanding you can use Sridhar's Guide - https://wpdevdesign.com/manual-query-params-in-oxygen/
post_type=post&posts_per_page=6&no_found_rows=true&nopaging=trueFor sizing option make width 100%
For layout make the element a block
Add a Class of Carousel-cell for the div to work correctly as a single slide.
For Layout options, All child elements stacked vertically with Horizontal alignment in the center and Vertical Alignment in the top.
For the Div element I added a padding of 5 px to left and right to make spacing. It is advised to only use padding in the case of carousel to avoid errors that is caused by margins.
In the stance for width I gave 25% as this would yield 4 carousel in view. You can also give 33.33% if you require on 3 carousel in view or as needed.
For the height make height AUTO
In the code block just paste the below javascript
jQuery(".flick").flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
autoPlay: true,
prevNextButtons: false,
pauseAutoPlayOnHover: false,
});To explain the above the first set of code is to remove repeater navigation which is unnecessary in this stance. Second code ensures the height of the carousel is as needed and matches the highest height to the repeater itself with the class flick and finally the last code initializes the carousel script.
The code has been updated only to work with flickity. The code would initialize the carousel script.
When adding the javascript note that you should change the word flick to the name you used in the repeater.
The final result is shared as a picture below:
If you have blocks library enabled you can use the below shortcode to do all the above without needed to manually do much edits except edit the post query as necessary. The below would enqueue the flickity script in code block import necessary css and javascript along with the repeater.
[Owl Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using owl carousel as it is the best option to implement as it has a very small footprint and is easy to implement."},"activeselector":false}']Read MoreFlickity Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using flickity as it is the best option to implement as it has a very small footprint and is easy to implement."},"activeselector":false}']Read MoreConfiguring Burp Suite With Android Nougat 2020
From Android Nougat the Burp Suite CA Certificate no longer works installed no longer works. Here is a guide to solve the problem"},"activeselector":false}']Read MoreOxygen dominating DIVI! Why I made the shocking switch?
Oxygen is a great plugin to use but I was a DIVI fanboy learn why I switched from DIVI to Oxygen and what benefits I found from switching the page builders."},"activeselector":false}']Read More6 Tips to a Great Web Portfolio
Having a great web portfolio is a must, even though you may have a CV / Resume, a portfolio helps the most. Read my tips to make a great web portfolio ."},"activeselector":false}']Read MoreBetter than Canva: GlorifyApp (No. 1 Alternative)
Canva is a great tool but what if there was something better Glorifyapp is more appealing to every designers dream."},"activeselector":false}']Read MoreBackdoor Attack - 60 Million WordPress Sites at Risk
According to WordPress, over 60 million people have chosen the software and they are vulnerable to backdoor attack. Take precautionary steps now."},"activeselector":false}']Read MoreOxygen + Gutenberg Blocks - A Simple Integration
Oxygen Builder's integration with Gutenberg blocks for better output in the fronted made with oxygen template system."},"activeselector":false}']Read MoreExcel in Workplace
In an office, the best way to survive is being good with Microsoft Excel which gives an edge in the workplace and helps stand out from the crowd."},"activeselector":false}']Read MoreQuadmenu an affordable premium WordPress Mega menu plugin
QuadMenu is the best powerful WordPress mega menu plugin to amplify your theme to give your users a great experience with its responsiveness and reliability."},"activeselector":false}']Read More
The carousel script can also be customized. It's just incredibly easy to change the style of the arrows, or dots: https://flickity.metafizzy.co/style.html
Try to modify those from the Slider element, you can also try out different options to make it look different: https://flickity.metafizzy.co/options.html
If you prefer other carousels over flickity you can try the below:
I have recently migrated all my posts from DIVI builder to Gutenberg and plan to use it going forward. Recently diving into Oxygen Builder I found some mismatches in the CSS and they were bugging me a lot. Being a curious new player in the field I wanted to fix it.
The first set of integration work is live and is working flawlessly with few errors. Almost all the blocks were working correctly except the Embed of Facebook & Audio.
Updated it too look better on some cases.
Fixed Bug: Caption links and caption texts on images
The Installation of this integration is fairly easy. One of the greatest feature in oxygen comes to play regarding this, Inner Content. Inner Content out of the box does not do anything but the mixing of code levels it up.
<?php
add_theme_support( 'responsive-embeds' );
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
?>.wp-block-preformatted {
display: block;
font-family: Menlo, Consolas, monaco, monospace;
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
margin: 1em 0;}
.wp-block-code {
font-family: Menlo, Consolas, monaco, monospace;
font-size: 14px;
color: #23282d;
padding: 0.8em 1em;
border: 1px solid #e2e4e7;
border-radius: 4px;
white-space: pre-wrap;
}
.wp-block-audio{
color: #23282d;
font-size: $default-font-size;
text-align: center;}
pre.wp-block-verse {
white-space: pre-wrap;
}
.wp-block-image figcaption {
overflow-wrap: break-word;
text-align: center;
font-size: x-small;
}The above should work for all Oxygen versions.
