/PHP/Slick slider and ACF Pro in WordPress

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

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

Similar codes

0 vote158 views1 answer
Laravel mcq questions
PHP
11 votes210 views2 answers
Command laravel for php artisan make :auth
PHP Laravel
18 votes136 views6 answers
Where clause in laravel
PHP
0 vote166 views1 answer
Sass for php
PHP
0 vote135 views1 answer
Php exec get pid
PHP
0 vote141 views1 answer
Woocommerce php customer reset password length
PHP
1 vote133 views1 answer
Laravel route fallback
PHP
29 votes134 views1 answer
Php generate random string fixed length
PHP
1 vote134 views1 answer
?? ' ' operator in php laravel
PHP
0 vote150 views1 answer
Send notification php to PC
PHP