neilgee
8/7/2015 - 2:36 AM

Slick Carousel Enqueued and USed with ACF

Slick Carousel Enqueued and USed with ACF

<?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');

}
<?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  //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  //<~ 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' );
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
	});
});
jQuery(document).ready(function($){
	$('.team-items').slick({ //add in your correct containing element
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  autoplay: true,
	  autoplaySpeed: 2000,
	});
});
<?php   // <~ don't add me


//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>
 <a href="/team"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
 
 </div>
 <?php endforeach; ?>
 </div>
<?php endif; 
}
<?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();