Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Slick Carousel Enqueued and USed with ACF
<?php // <~ keep me in
add_action('genesis_entry_content','themeprefix_team_slider' );
//Fields
//team_portfolio = Gallery Field
function themeprefix_team_slider() {
$images = get_field('team_portfolio');//add your correct filed name
if( $images ): ?>
<div class="team-items">
<?php foreach( $images as $image ): ?>
<div>
<!-- I have added a link around my images to point to the main team page - just remove the links if not required -->
<a href="/team"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
genesis();
<?php // <~ don't add me
//Fields
//team_portfolio = Gallery Field
function themeprefix_team_slider() {
$images = get_field('team_portfolio');//add your correct field name
if( $images ): ?>
<div class="team-items">
<?php foreach( $images as $image ): ?>
<div>
<a href="/team"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
// Call the function
themeprefix_team_slider();
jQuery(document).ready(function($){
$('.team-items').slick({ //add in your correct containing element
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
jQuery(document).ready(function($){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true,
arrows: true,
autoplay: false
});
});
<?php //<~ don't add me in
//Fields
//slider_portfolio = Gallery Field
function themeprefix_portfolio_slider() {
$images = get_field('slider_portfolio');
if( $images ): ?>
<div class="slider-for">
<?php foreach( $images as $image ): ?>
<div class="slick-container">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
add_action('genesis_entry_content','themeprefix_portfolio_slider' );
<?php //add me in
//Fields
//slider_portfolio = Gallery Field
$images = get_field('slider_portfolio');
if( $images ): ?>
<div class="slider-for">
<?php foreach( $images as $image ): ?>
<div class="slick-container">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif;
<?php
//Image Slider
//slider_image = field
//portfolio_slider = subfield
function agero_slider() {
if( have_rows('slider_image') ):
echo '<div class="slider-for">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>
<div class="slider-nav">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>';
else :
// no rows found
endif;
}
<?php //<~ don't add me in
add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' );
// Enqueue Slick scripts and styles
function themeprefix_slick_enqueue_scripts_styles() {
wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );
wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/js/slick-init.js', array( 'slickjs' ), '1.6.0', true );
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
}
@aronmoshe-m

This comment has been minimized.

Copy link

@aronmoshe-m aronmoshe-m commented Mar 9, 2017

Line 7 is missing a comma after '1.6.0'. Should be:

wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );

Just in case anyone else is using this project and it causes them a 500 server error like it did for me! :)

@neilgee

This comment has been minimized.

Copy link
Owner Author

@neilgee neilgee commented Apr 25, 2019

Thanks - code updated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.