Проблема реализации JQuery слайдер

Question

У меня возникают проблемы, реализующий ползунок Jquery (FlexSlider)

Я чувствую, что я что-то очень простой хватает, но по какой-то причине, я просто не могу положить палец на нем. Любая помощь будет потрясающей. Ссылка на тестовый сайт приведена ниже.

Я пытаюсь заставить ползунок появляться в пустой зеленой зоне.

Я также работаю в Gumby отзывчивым рамках

http://4grain.bmdigitalgroup.com/

Answer 1

Это ваш вопрос:

Uncaught TypeError: Object [object Object] has no method 'flexslider' 

... и выглядит как ваша загрузка файла Jquery после файла FlexSlider. попробуйте сохранить все ваши .js-файлы в одном месте, с вашим файлом jquery поверх всех из них.

У вас есть 2 файла jquery, загружаемых на эту же страницу. Вы должны только один, если вы не intentiontally пытаетесь загрузить из них 2 ..

попробуйте разместить свой сценарий ...

$(window).load(function() { 
    $('.flexslider').flexslider(); 
    }); 

в нижней части страницы, завернутый в теге сценария, перед тем тело заканчивается, а не внутри головы страницы. сценарий ожидает, пока страница будет загружена в любом случае.

ОБНОВЛЕНИЕ!

Эй, хорошая работа! Я вижу, что вы сделали на своей странице через веб-консоль.
И если вы хотите, чтобы избавиться от этого ...

Uncaught TypeError: Object [object Object] has no method 'on' 

... затем удалить файл JQuery 1.6.2 от верхней части страницы, и поместите fexslider.js файл в нижней части твоя страница.

Answer 2

Дайте #maincontentbodyheight, возможно 75px, то все дети должны иметь определенный height и width, даже идентификатор это width:100%. min-height не является подходящей величиной в этом случае

Ваши изображения кажутся намного большими, чем площадь зеленого стержня, как вы думаете, это будет анимировать?

Answer 3

Как уже отмечалось, у вас есть двойная ссылка на библиотеку jquery. Попробуйте сделать это, которое остановит двойные ссылки:

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