Owl Carousel Slider in Oxygen - Easy Method

Posted on - April 20, 20200 Comments

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.

Owl Carousel Example
Owl Carousel Example

Things Needed

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 */


Step 2: Create the repeater element

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.

Repeater Element Structure
Repeater Element Structure

Step 3: Modify the Elements

Repeater Element

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=true

In the layout option make child elements stack horizontally with top vertical alignment and center horizontal alignment.

Repeater Layout Option

Div Element

Make width 100%

Step 4: Create a Code Block

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.

Result

The final result is shared as a picture below:

Customization

Oxygen Element Block Shortcode

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.

[
]

If you prefer other carousels over flickity you can try the below:

Leave a Reply

Copyright © Ibrahim Jaber | Designed & Developed by Ibrahim Jaber
closephone-squarebarsenvelope-squarechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram