Thread: How to add an 2nd Featured Slider on your website

Index.php
Featured.php
Custom Style Sheet
+
The new featured-2.php you create in this tutorial

            <?php 
			if ( file_exists(STYLESHEETPATH . '/featured.php') )
	                include_once(STYLESHEETPATH . '/featured.php');
    	        else
        	        include_once(TEMPLATEPATH . '/featured.php');
			?>
			
			<?php include_once(TEMPLATEPATH . '/includes/theme-searchbar.php'); ?>

<?php 
			if ( file_exists(STYLESHEETPATH . '/featured-2.php') )
	                include_once(STYLESHEETPATH . '/featured-2.php');
    	        else
        	        include_once(TEMPLATEPATH . '/featured-2.php');
			?>
			
			<?php include_once(TEMPLATEPATH . '/includes/theme-searchbar.php'); ?>

$('.slider2').jCarouselLite({
<div class="shadowblock_out2">
div class="shadowblockdir2">
<div class="sliderblockdir2">
<div id="list2">
<div class="slider2">

<?php
/**
 * The featured slider on the home page
 *
 */
?>

<?php if ( get_option('cp_enable_featured') == 'yes' ) : ?>

<script type="text/javascript">
// <![CDATA[
    /* featured listings slider */
    jQuery(document).ready(function($) {
        $('.slider2').jCarouselLite({
            btnNext: '.next',
            btnPrev: '.prev',
            visible: 3,
            hoverPause: true,
            auto: 2800,
            speed: 3000,
            easing: 'easeOutQuint' // for different types of easing, see easing.js
        });
    });
// ]]>
</script>

    <?php query_posts( array('post__in' => get_option('sticky_posts'), 'post_type' => APP_POST_TYPE, 'post_status' => 'publish', 'orderby' => 'rand') ); ?>

        <?php if ( have_posts() ) : ?>

        <!-- featured listings -->
        <div class="shadowblock_out2">

            <div class="shadowblockdir2">

                <h2><class="dotted"><?php _e('Test Premium Ads', 'appthemes')?></h2>

                <div class="sliderblockdir2">

                    <div id="list2">

                        <div class="prev"><img src="<?php bloginfo('template_url'); ?>/images/prev.png" alt="" /></div>

                        <div class="slider2">


                                                    <ul>


                                <?php while ( have_posts() ) : the_post(); ?>

                                    <li>
                                        <span class="feat_left">

           <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"  <?php if ((get_option('cp_ad_image_preview') == 'yes') && (cp_get_image_url_raw($post->ID, 'large', 1) == true)) { ?>class="preview" rel="<?php echo cp_get_image_url_raw($post->ID, 'large', 1); ?>" <?php } ?>><?php if(get_post_meta($post->ID, 'images', true)) cp_single_image_legacy($post->ID, get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), 'preview'); else cp_get_image_url_feat($post->ID,'thumbnail', 'preview', 1); ?></a>
											
											<div class="clr"></div>

                                            <span class="price_sm"><?php if ( get_post_meta($post->ID, 'price', true) ) cp_get_price_legacy($post->ID); else cp_get_price($post->ID, 'cp_price'); ?></span>

										</span>

                                                                                   
                                    </li>

                                <?php endwhile; ?>

                            </ul>

                        </div>

                        <div class="next"><img src="<?php bloginfo('template_url'); ?>/images/next.png" alt="" /></div>

                    </div><!-- /slider -->

                    <div class="clr"></div>

                </div><!-- /sliderblock -->

            </div><!-- /shadowblock -->

        </div><!-- /shadowblock_out -->

        <?php endif; ?>

        <?php wp_reset_query(); ?>

<?php endif; // end feature ad slider check ?>

.content_res .shadowblockdir2 {
    background-color: #F2F2F2;
    border: 1px solid #C6C6C6;
    border-radius: 0 0 0 0;
    width: 560px;
}

.content_res .shadowblockdir2 {
    height: 200px;
    padding: 8px 15px 5px;
}

.shadowblock_out2 {
    border: 0 solid #000000;
    border-radius: 0px 0px 0px 0px;
    margin: 0 0 20px;
    width: 560px;
}

#list2 {
    height: 150px;
    margin: 0 auto;
    width: 555px;
}

.slider2 ul li { padding:2px 29px; height:150px; width:90px}

.slider2 { float:left; left:-5000px; margin-left:50px; position:relative; height: 150px; /* visibility:hidden; */}