Forums

Power Slider Lite - full width - Responsive - how to

Permalink 2 users found helpful
Hi it's my first post, so if publish in wrong place - correct me

if someone is looking for setup Power Slider Lite to full width and responsive - this is solution

1. setup slider in view.php:
slideResize: 0,

2. in style.css
.powerSliderShell {position: relative;  }
.powerSliderContainer {    width: auto !important; }
.powerSlide { display: block; text-decoration: none; position: relative; width:100%; }
.powerSlide img { width:100%!important; height:auto!important; }

3. in your own file - function.js
$( window ).resize(function(){
   var resizebaner = $('.powerSlide').height();
   $('.powerSliderContainer').css({
      'height' : resizebaner + 'px'   
   });
});


for me it works correct and fine ;)
 
JohntheFish replied on at Permalink Reply
JohntheFish
Good post. Don't worry about posting here, I am sure others will appreciate it.

To submit to the official howto section, go to
http://www.concrete5.org/profile/howtos/post...

Once it is approved as a howto, you can then cross link from this thread.
seniorb replied on at Permalink Reply
Thanks for sharing; for those implementing this, you'll need to make sure you don't enter height and size parameters in the block when you edit; just leave the boxes blank.
matgdz replied on at Permalink Reply
after use this few months we make some improvments : 

function resizeImages(){
    var resizebaner = $('.powerSlide').height();
   $('.powerSliderContainer').css({
      'height' : resizebaner + 'px'   
   });  
}
$(document).ready(function(){
      resizeImages();
});       
$(window).load(function(){
      resizeImages();
});
$( window ).resize(function(){
   resizeImages();
});

there was some problems whene you refresh site - sometimes dosen't work
but after this improvments ( look up ), all work corectly