Last active
April 25, 2019 23:50
-
-
Save neilgee/d26637f9123adcaa9fc6 to your computer and use it in GitHub Desktop.
Slick Carousel Enqueued and USed with ACF
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($){ | |
$('.team-items').slick({ //add in your correct containing element | |
slidesToShow: 3, | |
slidesToScroll: 1, | |
autoplay: true, | |
autoplaySpeed: 2000, | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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' ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Line 7 is missing a comma after '1.6.0'. Should be:
Just in case anyone else is using this project and it causes them a 500 server error like it did for me! :)