/CSS/Slick slider and ACF Pro in WordPress

Slick slider and ACF Pro in WordPress

function child_enqueue_styles() {
	// Slick slider files enqueue
	wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/assets/js/slick.min.js', array( 'jquery' ), '1.8.1', true );
	wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/assets/js/slick-init.js', array( 'slickjs' ), '1.8.1', true );
	wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/assets/css/slick.css', '1.8.1', 'all');
	wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/assets/css/slick-theme.css', '1.8.1', 'all');
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

Source: wpbeaches.com

Slick slider and ACF Pro in WordPress

/* Slick slider */
.slick-track > div {
    margin-right: -20px !important;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: teal !important;
    border: none;
    outline: none;
    background: transparent !important;
}
.slick-prev:hover, .slick-next:hover {
    color: teal !important;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .95 !important;
    color: teal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Source: wpbeaches.com

Slick slider and ACF Pro in WordPress

/**  
 * Plugin your ACF here
*/
<?php 

if( have_rows('slick_slider') ):
echo'<div class="slider-nav">';
 	// loop through the rows of data
    while ( have_rows('slick_slider') ) : the_row();
    // display a sub field value
    //vars
    $icon = get_sub_field('icon'); 
    ?>
    <div class="icon-wrapper" data-tooltip="<?php if ( $icon_title = get_sub_field( 'icon_title' ) ) : ?><?php echo esc_html( $icon_title ); ?><?php endif; ?>">
	    <img class="icon-image" src="<?php echo esc_url( $icon['url'] ); ?>" alt="<?php echo esc_attr( $icon['alt'] ); ?>" />
    </div>
    <?php      
    endwhile;
echo '</div>';

else :

    // no rows found

endif;

Source: wpbeaches.com

Similar codes

4 votes246 views1 answer
Clealyrun
CSS
0 vote251 views1 answer
Frontend to backend fetching
CSS
0 vote230 views1 answer
Css stretch font vertically
CSS
0 vote231 views1 answer
Css add space to the top
CSS
3 votes230 views3 answers
Htaccess return 404
CSS
0 vote235 views1 answer
Css select without class
CSS
20 votes260 views3 answers
Text overflow ellipsis two lines
CSS
3 votes253 views1 answer
Include screen size
CSS
0 vote224 views1 answer
How to make distance betwwen corosel transition
CSS
1 vote249 views1 answer
Html how to use a background image fill not stretch
CSS