WordPress.org

Ready to get started?Download WordPress

Forums

Recent Posts Slider
Make it responsive? (6 posts)

  1. seezee
    Member
    Posted 2 years ago #

    Any way to make this sucker responsive? I've managed to make the outer container responsive:

    #rps, #rps .window {
      max-width:100%;
      height:auto;
    }

    but any other changes, e.g., #rps .slider, bollix the display w/o accomplishing what I need, which is for the individual slide content to shrink w/ the size of the parent. Setting .col to max-width:50%; has no effect, either.

    http://wordpress.org/extend/plugins/recent-posts-slider/

  2. wp__developer
    Member
    Posted 1 year ago #

    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

  3. seezee
    Member
    Posted 1 year ago #

    /* 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.

  4. inyongwebid
    Member
    Posted 1 year ago #

    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 :)

  5. seezee
    Member
    Posted 1 year ago #

    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.

  6. Odinkinder
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.