Использование Flexslider 2

Пытается запустить Flexslider 2, и он просто отображает список фотографий. Не могу понять, что не так. Является ли Google еще активным местом размещения сценария jQuery? Кто-нибудь находит ошибки? Использование Flexslider 2

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simpson Strong-Tie</title> 
 
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> 
 

 
</head> 
 

 
<body> 
 
    <section> 
 
    <div class="flexslider"> 
 
     <ul class="slides"> 
 
     <li> 
 
      <img src="images/Architectural Products Group SubCat Image.jpg"> 
 
     </li> 
 
     <li> 
 
      <img src="images/Mudsupply Splash.png"> 
 
     </li> 
 
     <li> 
 
      <img src="images/Quik Drive.jpg"> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <!-- jQuery --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
    <script> 
 
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>') 
 
    </script> 
 

 
    <!-- FlexSlider --> 
 
    <script defer src="js/jquery.flexslider.js"></script> 
 

 
    <script type="text/javascript"> 
 
    $(function() { 
 
     SyntaxHighlighter.all(); 
 
    }); 
 
    $(window).load(function() { 
 
     $('.flexslider').flexslider({ 
 
     animation: "slide", 
 
     start: function(slider) { 
 
      $('body').removeClass('loading'); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

Любая помощь очень ценится как всегда!

источник

2014-11-21 Bmiles

Этот вопрос SyntaxHighlighter.all() ;.Просто удалите эти строки кода, а затем запустите работу $ (function() { SyntaxHighlighter.all(); }); – HaveNoDisplayName

Вопрос не с flexslider. Проблема связана с syntaxhighliter, который включен неправильно.

Просто удалите эти строки из своего кода, затем он начнет работать.

$(function() { 
    SyntaxHighlighter.all(); 
});

Если вы хотите inlcude SyntaxHighlighter на вас странице, вам нужны эти основные шаги, чтобы следовать: -

Чтобы получить SyntaxHighlighter работать на вас странице, вам необходимо сделать следующее:

1) Добавить базовые файлы на странице: shCore.js и shCore.css

2) Добавить кисти, которые вы хотите (например, shBrushJScript.js для JavaScript, просмотреть список всех доступных кистей)

3) Включите shCore.css и shThemeDefault.css

4) Создайте фрагмент кода либо или метода (см ниже)

5) Вызов SyntaxHighlighter.all() JavaScript метод

Больше информации см http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

простой пример, чтобы добавить flexslider на вас странице (Это работает на моей странице образца)

Inlcude Div в HTML

<div class="flexslider"> 
     <ul class="slides"> 
     <li> 
      <img src="/Images/Image1.png" /> 
     </li> 
     <li> 
      <img src="/Images/Image2.png" /> 
     </li> 
     <li> 
      <img src="/Images/Image3.png" /> 
     </li> 
     <li> 
      <img src="/Images/Image4.png" /> 
     </li> 
     </ul> 
    </div>

Включите JS и CSS файл

<script src="jquery.flexslider.js" type="text/javascript" defer ></script> 
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />

Inlcude Jquery

<script type="text/javascript">  
     $(document).ready(function() { 
      $(window).load(function() { 
       $('.flexslider').flexslider({ 
       animation: "slide" 
       }); 
      }); 
     }); 
    </script>

http://jsfiddle.net/Gajotres/CPpBD/

http://flex.madebymufffin.com/index.html

[EDIT]

Вы должны добавить JQuery, и выберите "onDomready" из выпадающего списка в jsfiddle, то ваш jsfiddle выглядеть работает. см прикрепить скриншот

enter image description here

источник

2014-11-21 17:59:38 HaveNoDisplayName

Я удалил строку кода, которую вы упомянули, она все еще не работает, она просто отображает фотографии в списке. Что-то еще не так? – Bmiles

Просто используйте этот, $ (window) .load (function() { $ ('. Flexslider'). Flexslider ({] анимация: «слайд» }); }); удалить, начало: функция (слайдер) { $ ('body'). removeClass ('loading'); } – HaveNoDisplayName

Я обновил ответ с образцом рабочего кода для реализации flexslider. Взгляни. – HaveNoDisplayName

ответ

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