Использование слайдера jQuery cycle2

В видеокурсе о php, с которым знакомлюсь в свободное от работы время, встретилась фраза “…здесь используется один из слайдеров который я взял из интернета” и в описании дана ссылка
http://jquery.malsup.com/cycle2/

Ок, js не известный зверь для меня, но идем по линку, на страницу Download
2 релиза: Production, Development. Чем отличаются они не знаю, не гуглил. Но визуально предполагаю что в Production убраны форматирование для минимизации размера. :slight_smile:

Качаю архив Production, выдобываю файл в папку js.

Ниже написано что надо дополнительный плагин, линк на который дается, + код подключения. Качаю плагин Carousel.
Ну все, щас будут карусели как на демо

В блокноте пишу код (убеждаюсь что названия файлов js такие же как и скачанные :wink: ):

<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>

или ето само-собою подразумевается?

Это наверно продвинутое демо, в Cycle2 Getting Started было class="cycle-slideshow" )

Если оно загрузилось в network и не выдало ошибок в консоли, то скорее всего что-то как тут, не нашло какие элементы обрабатывать или надо было вызвать какую-то функцию для инициализации.

Но в [Getting Started] не карусель, а слайды :wink:

Вообще в Cycle2 Demos написано

You are encouraged to view the source of these demos

Так что автор и предполагал, что надо смотреть исходник, всё описывать видимо было лень :soidet: