hey, I was thinking of making it responsive too, have you found a solution yet?
I thought about rewriting the plugin with flexslider2, because its pretty nice responsive and it has a carousel function included.
another way would be to rewrite the code and put it in a fluid container like 1140 css grid or something.
anyways, if you found a shorter solution please tell me
/* Responsive slider */
.responsive-slider, .flexslider, .responsive-slider * {
max-width:100%;
height:auto;
}
I put that in my CSS; it shrinks the outer container but has no effect on the slides. Probably eliminating the float on the individual slides & letting them stack would be the way to go.
on header.php add
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://files.cryoffalcon.com/javascript/responsiveslides.min.js' type='text/javascript'/>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
add css on Recent Posts Slider css
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
and to show Recent Posts Slider
<ul class="rslides">
<?php if (function_exists('rps_show')) echo rps_show(); ?>
</ul>
thanks 🙂
It would be better to come up with a pure CSS solution to this. JavaScript isn’t always available, and there are so many scripts running on the average WP site that adding more can mean a real performance hit.
This looked promising, but, it’s not working for me, it’s most likely my lack of understanding. Where is the header code placed? Second, that last bit of <ul class = code goes where? If I could get this to work, it would save me a lot of headache.
Thanks
Terry
