Пример Flexslider2: тот же код, разные результаты (локально и jsfiddle)

Я реализовал Flexslider2 как локально, так и на jsfiddle. Каждый использует тот же самый код. Однако при просмотре моей страницы локально (Firefox, Chrome и IE9) Flexslide только изменяет размер ширины изображений.Пример Flexslider2: тот же код, разные результаты (локально и jsfiddle)

jsfiddle, http://jsfiddle.net/T64Gp/3/, производит желаемый результат, когда соотношение сторон изображения поддерживается

Моего локального кода (HTML) выглядит следующим образом. Нет стилей вне flexslider.css и никакого дополнительного javascript вне 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>

Любое представление о том, почему это может происходить будут оценены.

источник

2013-08-07 frmt

Адрес: Адрес: Похоже, браузер будет входить в режим причуд –

Я не уверен, правильно ли я вас понял, но скрипка, которую вы предоставили, похоже, не поддерживает пропорции. Для меня высота изображения остается неизменной, но ширина изменяется при изменении размера окна. – basilikum

@basilikum Интересно, что это как-то атрибут width и height добавлен к каждому изображению в слайд-шоу. Это было не так, когда я создал скрипку, и это не так на моем локальном сайте. Я, надеюсь, исправил скрипку. – frmt

Два предложения, которые вы могли бы попробовать:

Ваш код выше и jsFiddle используют различные версии JQuery. The flexslider example page использует JQuery 1.9.1 так что, возможно, лучше придерживаться этого на текущий

Наиболее вероятной причиной является то, что, хотя вы должны инициализирует FlexSlider с

<script type="text/javascript" charset="utf-8"> 
$(window).load(function() { 
$('.flexslider').flexslider(); 
}); 
</script>

Это гарантирует, что содержимое страницы загружается перед тем FlexSlider инициализируется.

Удачи вам!

источник

2013-08-08 13:20:52

Пример Flexslider2: тот же код, разные результаты (локально и jsfiddle)

ответ

Смежные вопросы