treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Carosel Slider and Wordpress

  • I have a carosel slider that I want to use with wordpress but I'm not quite sure how to use the wordpress loop and apply list items to two seperate lists. Below you will see an example of the code.


    <div id="ei-slider" class="ei-slider">
    <ul class="ei-slider-large">
    <li>
    <img src="images/large/1.jpg" alt="image01" />
    <div class="ei-title">
    <h2>Creative</h2>
    <h3>Geek</h3>
    </div>
    </li>
    <li>...</li>
    </ul>
    <ul class="ei-slider-thumbs">
    <li class="ei-slider-element">Current</li>
    <li>
    <a href="#">Slide 1</a>
    <img src="images/thumbs/1.jpg" alt="thumb01" />
    </li>
    <li>...</li>
    </ul>
    </div>
  • Okay, so I've worked with the code a little now.
    I'm at a loss on how to set the ei-slider-element based on which item is "current".


    <div id="ei-slider" class="ei-slider">
    <?php query_posts('category_name=homepage_slider&posts_per_page=10'); ?>
    <?php if ( have_posts() ) : ?>
    <ul class="ei-slider-large">
    <?php while ( have_posts() ) : the_post(); ?>
    <li><?php the_post_thumbnail('large');?></li>
    <?php endwhile; ?>
    </ul><!-- ei-slider-large -->
    <?php rewind_posts(); ?>
    <ul class="ei-slider-thumbs">
    <?php while ( have_posts() ) : the_post(); ?>
    <li class="ei-slider-element">Current</li>
    <li><a href="#"><?php the_title(); ?></a><?php the_post_thumbnail('thumbnail');?></li>
    <?php endwhile; ?>
    </ul><!-- ei-slider-thumbs -->
    <?php endif; ?>
    </div><!-- ei-slider -->