Slider with field-type Image

• irenehofer

• January 15, 2015 at 2:53 am

For a portfolio page, I have created a custom post type for each reference called “referenzen”. Since I need more than one image per reference (displayed in different ways), I have created some custom post types.
Now, on the front page, I want to display the newest references in a slider (kind of this type, exmple 4: http://www.wpcue.com/wordpress-plugins/advanced-post-slider/template-one/).

I tried to use some plugins, but there just created for regular post thumbs.

For now, I’m having the following code to display the latest 3 references.

<section class="entry-content cf" itemprop="articleBody">
     <?php query_posts( array (
          'post_type' => 'referenzen',
          'posts_per_page' => 4 // minus 1
     )); while ( have_posts() ) : the_post(); ?>
                                    
     <?php 
          $image = get_field('bg');
          if( !empty($image) ): ?>
               <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
          <?php endif; ?>
          <?php endwhile; wp_reset_query(); ?> 
</section>

Now I need to bring this into some slider/carousel…

Any help is much appreciated

• mediawerk

• January 16, 2015 at 2:45 am

you need to add some js and do some code changes that it fit.
depends on selected js that would normally be div or ul/li (or a combination of it)

Basicly it would be something like

wp_register_script ...
wp_enqueue_script ...
<div class="slider_container">
    <ul>
        <?php foreach( $slides as $slide): ?>
        <li>
            code to load img permalink text from slide
        </li>
        <?php endforeach; ?>
    </ul>
</div>

maybe not what you like to hear, nevertheless i hope that this info help you to solve your problem