download.png

Live composer  gallery slider lacks the prev and next button. Hope this tutorial helps to add this button on live composer.

Step 1: First create js files somewhere on your child theme. Here I kept js files inside child-theme/js/child-theme-custom-scripts.js.

Step 2: Enqueue this scripts on the WordPress standard way.

function child_theme_enqueue_styles() {

$parent_style = 'parent-style';
wp_enqueue_script( 'child-theme-custom', get_stylesheet_directory_uri() . '/js/child-theme-child-custom-scripts.js', array( 'jquery' ), '1.0.0', true );

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Step 3: Add this following script on to the theme-child-custom-scripts.js

/** 
This files contains all the custom script of  child theme
*/
jQuery( document ).ready( function() { 
jQuery( '.dslc-carousel, .dslc-slider' ).each( function(el) { 
// Variables 
var carousel, container; carousel = jQuery( this ); 
container = carousel.closest( '.dslc-module-front' ); var nav_elements = '
'; jQuery( container ).append( nav_elements ); } ); } ); //end of read function

Step4: Finally add this css on child theme style.css files

/*Main slider*/

.lc-flex-direction-nav {
position: absolute;
width: 100%;
bottom: 58%;
z-index: 1000;
}

.lc-flex-direction-nav {
position: absolute;
width: 100%;
bottom: 58%;
z-index: 1000;
}

.flex-direction-nav.lc-flex-direction-nav a {
color: #242424;
background-color: #fff;
font-size: 58px;
line-height: 54px;
letter-spacing: 0;
padding: 10px 20px;
-webkit-transition: .15s ease-in;
-moz-transition: .15s ease-in;
transition: .15s ease-in;
}

.flex-direction-nav.lc-flex-direction-nav a:hover {
color: #fff;
background-color: #242424;
}

.flex-direction-nav.lc-flex-direction-nav .flex-next,
.flex-direction-nav.lc-flex-direction-nav .flex-next {
padding-right: 14px;
}

.flex-direction-nav.lc-flex-direction-nav .flex-prev,
.flex-direction-nav.lc-flex-direction-nav .flex-prev {
padding-left: 14px;
}

.flex-direction-nav .dslc-carousel-nav-prev,
.flex-direction-nav .dslc-carousel-nav-next {
background: inherit;
border: 0;
border-radius: 0;
display: inline-flex;
justify-content: center;
align-items: normal;
height: auto;
position: initial;
left: auto;
text-decoration: none;
vertical-align: middle;
}

This add navigation on every gallery slider you created via live composer gallery slider module.

Note: You may need some tweak on css to make navigation look better.

Your suggestion will be heartly  welcome.

Thanks

 

Advertisements