jquery cycle automatically fit to window width on resize
cycle, jquery
Solution
This is how I managed to do it....
$(document).ready(function() {
$('#slideshow').cycle({
slideResize: true,
containerResize: true,
width: '100%',
height: '100%',
fit: 1,
fx: 'fade',
next: '#next',
prev: '#prev',
});
});
Hope this helps anyone looking to solve this issue (I haven't fully tested it yet, and when I put in the pager button it seems to play up, similarly when using an fx such as scrollHorz it seems to mess it up..)
Problem
If I resize the window and then refresh the slider and the images within will resize to match the browser width, however I need this to happen automatically on window resize.... how can this be done ?? http://subzerostudio.com/Clients/perkinreveller/test.html ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ timeout: 400, fx: 'scrollHorz', next: '#next', prev: '#prev', }); }); </script> </head> <body> <style> body { margin:0; padding:0; height:100%; width:100%; position:absolute; } #slideshow-wrapper { width:100%; min-width:600px; } .slideshow { width:100%; } .slideshow div, .slideshow div img { width:100% !important; min-width:100%; height:auto; } </style> <div class="slideshow"> <div> <img src="images/img1.jpg" alt="" /> </div> <div> <img src="images/img1.jpg" alt="" /> </div> <div> <img src="images/img1.jpg" alt="" /> </div> </div> </body> </html> ```