<link rel="stylesheet" href="<?php bloginfo('template_directory')?>/css/slick.css">

<style>


.slick-dots { position: absolute; right: 20px; bottom: 20px; width: auto;}
.slick-dots li { display: inline-block; width: auto; height: 20px; margin: 0 0 0 5px;}
.slick-dots li button { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #a9a7a6;}
.slick-dots li button:before { display: none;}
.slick-dots .slick-active button { width: 10px; background-color: #e05a5a;}

.slick-prev, .slick-next { position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -40px;border-radius:200px; }
.slick-prev { left: 0;}
.slick-next { right: 0;}
.slick-prev:hover, .slick-next:hover { background-color: #e05a5a;}
.slick-prev:before, .slick-next:before { font: 50px/60px "SimSun";text-shadow: 0 1px 1px #a0a0a0;}
.slick-prev:before { content: "<";}
.slick-next:before { content: ">";}

/*

@media (max-width:1024px){.slick{display: none; 
} }

*/
</style>
</head>

<body>

<!-- Demo start  -->
<div class="slick">
<?php query_posts($query_string . 'tag='. stripslashes(_hui('site_widths')).'&showposts=' . $limit=4)?>        
    		<?php while ( have_posts() ) : the_post();?>

	<div><a href="<?php the_permalink() ?>" target="_blank" title="<?php the_title(); ?>"><img alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=360&w=670&zc=1" ></a>
    <span> <a href="<?php the_permalink() ?>" target="_blank" title="<?php the_title(); ?>"> <?php the_title(); ?>  </span> </a></div>
                <?php endwhile; wp_reset_query(); ?>   
	
</div>
<!-- Demo end -->
 
<script src="<?php bloginfo('template_directory')?>/js/jquery-1.8.3.min.js"></script>
<script src="<?php bloginfo('template_directory')?>/js/slick.js"></script>
<script>
$(function(){
	$('.slick').slick({
		dots: true,  //显示项目导航
		fade: true,  //淡入淡出
		autoplay: true  //自动播放
	});
});
</script>



<div class="thumbs">
<?php $sticky = get_option('sticky_posts'); rsort( $sticky );
		query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1, 'showposts' => 3 ) );
		while (have_posts()) : the_post(); ?>

<div class="thumbtt">
<a href="<?php the_permalink(); ?>" class="img" target="_blank">
<img alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=112&w=150&zc=1" >
<span class="bg"></span>
<p class="title"><?php echo mb_strimwidth(get_the_title(), 0, 35, '…'); ?></p>
</a>
</div>

  <?php endwhile; wp_reset_query(); ?>




</div>


<?php
/**
 * [mo_slider description]
 * @param  string $id   [description]
 * @return html         [description]
 */
function mo_slider( $id='slider' ){
	$indicators = '';
	$inner = '';

	$sort = _hui($id.'_sort') ? _hui($id.'_sort') : '1 2 3 4 5';
    $sort = array_unique(explode(' ', trim($sort)));
    $i = 0;
    foreach ($sort as $key => $value) {
        if( _hui($id.'_src_'.$value) && _hui($id.'_href_'.$value) && _hui($id.'_title_'.$value) ){
            $indicators .= '';
            $inner .= '';
            // <span class="carousel-caption">'._hui($id.'_title_'.$value).'</span>
            $i++;
        }
    }

	echo '';
}