avi111

i tweaked the wordpress plugin “PHP Code for posts”

i created a procedure for every post (with offset) and put it in the slider. i mean put the shortcode of [php snippet=1] in the post. you have to copy the code for every slide.

the snippet is something like this:
(when cat= is optional, and offset is going from 0 to the number of recent posts you want minus 1.

<?php query_posts('cat=14,15&posts_per_page=1&offset=1'); ?>

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

<div>
<a href='<?php the_permalink() ?>' title='<?php the_title(); ?>'>
<?php
if ( has_post_thumbnail() ) {
   the_post_thumbnail(array('medium'), array('class' => 'alignleft'));
}
?>
</a>
<h4><a href="<?php the_permalink(); ?>" title="Read full post"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<br>
<?php endwhile; ?>

<?wp_reset_query(); ?>

here’s my method:

1. create a dynamic sidebar for every device resolution you want
2. use css property of @media screen. set the wanted slider in “visibility: visible” and the unwanted in “visibility: hidden;”
3. display the ml post slider in the visible class, and set the width
4. play with css “margin” (top/bottom) property to align the slider properly

for example:

<style>
/* default */
.resolution_greater_500
{
visibility: visible;
}

.resolution_smaller_500
{
visibility: hidden;
}

/* for devices with resolution under 500px */
@media screen and (max-width: 500px){

.resolution_greater_500
{
visibility: hidden;
}

.resolution_smaller_500
{
visibility: visible;
}

}

</style>

<div class="align_slider">
<div class="resolution_greater_500">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>

<div class="resolution_smaller_500">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>
</div>

</div>

the align_slider class is depended on your choice to the slider height