javascript - Flexslider2 example: Same code, different outcomes (Locally and jsfiddle) -
i have implemented flexslider2 both locally , on jsfiddle. each uses exact same code. when view page locally on (firefox, chrome , ie9) flexslide resizes images width.
the jsfiddle, http://jsfiddle.net/t64gp/3/, produces desired outcome image's aspect ratio maintained
my local code (html) follows. there no styles outside of flexslider.css , no additional javascript outside of jquery , flexslider.js.
html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="flexslider.css"> </head> <body> <div class="flexslider"> <ul class="slides"> <li> <img src="1.jpg" alt="1" title="1"> </li> <li> <img src="2.jpg" alt="2" title="2"> </li> <li> <img src="3.jpg" alt="3" title="3"> </li> </ul> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="flexslider.js"></script> <script> $('.flexslider').flexslider({}); </script> </body> </html> any insight on why might happening appreciated.
two suggestions try:
your code above , jsfiddle using different versions of jquery. the flexslider example page uses jquery 1.9.1 maybe it's best stick
the cause though should initialise flexslider
<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> this ensure page content loaded before flexslider initialises.
good luck!
Comments
Post a Comment