In the Oxygen Slack workspace, a user asked:
Guys, I’m in a bit of a pickle. I’ve now bought 3 different vertical carousel/slider plugins. The last one was ROYAL SLIDER on code canyon. None of them work well (Royal Slider not at all) with Oxygen.
Any recommendations for a plugin which can display 3 images at a time in a vertical carousel?
The user also wanted only the down arrow at the bottom to appear.
In this tutorial, I show how Slick JS can be used to display entries of Easy Posts element as a vertical carousel in Oxygen.
Step 1
Edit your Oxygen template and add a Section and inside that, Easy Posts and Code Block elements.
Bring up the Structure tree and click on the Easy Posts element.
Select your desired post type and the number of entries in the Easy Posts element.
In my test site, I have
a) set the preset to “List – Standard (Centered)”
b) custom selected for WP Query with portfolio Post Type and Count as 6
c) set max-width to 400px in Advanced > Size & Spacing
d) edited the Template PHP to display the featured image and title both linked to the permalink
<div class='oxy-post'>
<?php
if (has_post_thumbnail()) {
?>
<a href='<?php the_permalink(); ?>'><img src='<?php the_post_thumbnail_url(); ?>' class='oxy-post-image' /></a>
<?php
}
?>
<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>
</div>and the Template CSS:
%%EPID%% .oxy-posts {
display: flex;
flex-direction: column;
}
%%EPID%% .oxy-post {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
margin-bottom: 2em;
}
%%EPID%% .oxy-post-image {
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
}
%%EPID%% .oxy-post-title {
font-size: 2em;
line-height: 1.2em;
}Step 2
Install and activate my custom functionality plugin.
a) Connect to your server using a FTP client and upload
i) ajax-loader.gif to plugin’s assets/images directory.
ii) slick.css to plugin’s assets/css directory.
iii) slick.min.js to plugin’s assets/js directory.
b) Create a file named slick-theme.css in assets/css having the following:
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
background: #fff url('./images/ajax-loader.gif') center center no-repeat;
}
/* Arrows */
.slick-prev,
.slick-next {
/* font-size: 0;
line-height: 0; */
position: absolute;
left: 50%;
display: block;
/* width: 20px;
height: 20px; */
padding: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
/* color: transparent; */
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
/* color: transparent; */
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before {
/* font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
opacity: .75;
font-size: 24px;
}
.slick-next {
top: -25px;
display: none !important;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: '\f078';
}
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-prev {
bottom: -55px;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: '\f077';
}
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}c) Edit plugin.php and add
wp_enqueue_style(
'slick-css',
plugin_dir_url( __FILE__ ) . 'assets/css/slick.css'
);
wp_enqueue_style(
'slick-theme-css',
plugin_dir_url( __FILE__ ) . 'assets/css/slick-theme.css'
);
wp_enqueue_script(
'slick',
plugin_dir_url( __FILE__ ) . 'assets/js/slick.min.js',
array( 'jquery' ),
'1.9.0',
true
);inside custom_enqueue_files() function.
We shall load Font Awesome for the down arrow button. Add
add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
* Enqueues Font Awesome.
*/
function custom_load_font_awesome() {
wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.1.0/css/all.css' );
}at the end in plugin.php.
Step 3
Back in Oxygen, click on the Code Block element.
Delete
<?php
echo "hello world!";
?>from the PHP & HTML area.
In the JavaScript area, add
jQuery(".oxy-posts").slick({
vertical: true,
verticalSwiping: true,
slidesToShow: 3,
slidesToScroll: 3,
nextArrow: '<button class="slick-prev slick-arrow" aria-label="Previous" type="button"></button>',
prevArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button"></button>',
});Reference: https://sridharkatakam.com/load-font-awesome-5-wordpress/