В видеокурсе о php, с которым знакомлюсь в свободное от работы время, встретилась фраза “…здесь используется один из слайдеров который я взял из интернета” и в описании дана ссылка
http://jquery.malsup.com/cycle2/
Ок, js не известный зверь для меня, но идем по линку, на страницу Download
2 релиза: Production, Development. Чем отличаются они не знаю, не гуглил. Но визуально предполагаю что в Production убраны форматирование для минимизации размера.
Качаю архив Production, выдобываю файл в папку js.
Ниже написано что надо дополнительный плагин, линк на который дается, + код подключения. Качаю плагин Carousel.
Ну все, щас будут карусели как на демо
В блокноте пишу код (убеждаюсь что названия файлов js такие же как и скачанные ):
<html>
<head>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="js/jquery.cycle2.min.js"></script>
<!-- include one or more optional Cycle2 plugins -->
<script src="js/jquery.cycle2.carousel.js"></script>
</head>
<body>
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-timeout=5000
data-cycle-carousel-visible=5
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach6.jpg">
<img src="http://malsup.github.io/images/beach7.jpg">
<img src="http://malsup.github.io/images/beach8.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
</body>
</html>
Открываю в браузере - нифига. Картинки выстроились в ряд и не каруселят.
Открываю исходный текст страницы примеров и методом исключения подбираю что нужно для работы скрипта.
Вопросы:
- как искать почему не работает, если в network и консоли ничего нет?
- почему нигде на сайте я не встретил что надо еще прописывать отдельно
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
или ето само-собою подразумевается?