/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

0 vote287 views1 answer
Css id with mask wildcard
CSS
1 vote268 views1 answer
How to desactivate txt selection css
CSS
0 vote286 views1 answer
Tailwind simple product card
CSS
36 votes299 views6 answers
How to insert gradient in css
CSS
0 vote276 views1 answer
Css position element in the middle of a header
CSS
2 votes273 views3 answers
Cant read pdf file in python
CSS
6 votes232 views3 answers
Django css
CSS
50 votes280 views5 answers
Css reset style
CSS
0 vote274 views1 answer
How to dedeclare a variable and use it in css
CSS
-2 votes290 views1 answer
Css opacity transition
CSS