Anything Slider — JQuery слайдер контента для WordPress

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее

Здравствуйте, дорогие друзья! Достаточно часто возникает необходимость установить на сайте слайдер контента, и хочется сказать, что сделать это совсем не сложно. Напомню, что чуть ранее я писал, как установить красивый слайдер картинок Nivo Slider. Сегодня мы столкнемся с плагином “AnythingSlider”, который работает на jQuery. Предлагаю вам сразу скачать AnythingSlider, чтобы потом уже не возвращаться к этому.

Слайдер контента для WordPress - AnythingSlider

Установка плагина AnythingSlider на WordPress

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

Если вы уже скачали архив плагина, то самое время закачать плагин на сайт с помощью FTP клиента. Распакованную папку следует разместить в папке /wp-content/plugins/. Для удобства, я переименовал папку плагина в “ProLoser”, так имя папки короче и ее удобнее использовать.

После того как вы закачаете плагин на ваш WordPress сайт, в админке ничего активировать не нужно, потому что плагин не адаптирован под WordPress. Плагин мы подключим следующим образом.

Подключаем файлы плагина к сайту

Для того чтобы подключить необходимые файлы к сайту, вам нужно будет изменить файл header.php. Вы можете сделать это в Админке сайта, на вкладке “Внешний вид –> Редактор”, но я предпочитаю работать с сайтом через ftp-клиент, это гораздо удобнее и быстрее.

Итак, между тегами <head> и </head> вам нужно вставить следующий код:

<link rel="stylesheet" type="text/css" href="/wp-content/plugins/ProLoser/css/anythingslider.css" />

Путь до файла стилей anythingslider.css у вас может немного отличаться, если вы закачали плагин не в папку /plugins/ или не переименовали папку плагина в /ProLoser.

Далее необходимо подключить JS файлы слайдера. Делается это следующим образом:

<script type="text/javascript" src="/wp-content/plugins/ProLoser/js/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/plugins/ProLoser/js/jquery.anythingslider.js"></script>

Если вы не понимаете содержимое этих строк, то вкратце, src="здесь адрес до файлов JS на сайте"type="text/javascript" указывает что исполняется скрипт Джава.

Если у вас еще не подключены библиотеки JQuery, то делается это с помощью следующего кода:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Тут ничего менять не надо. Библиотеки JQuery подгружаются с серверов Google.

 Инициализируем Anything Slider - вставляем слайдер на сайт

Файлы слайдера вы подключили. Теперь нужно добавить слайдер на сайт и инициализировать его. Для того чтобы добавить слайдер на сайт, в шаблон вашей темы добавьте следующий код:

<div id="slider">

	<li class="panel2">
		Контент первого слайда
	</li>

	<li class="panel1">
		Контент второго слайда
	</li>

	<li class="panel3">
		Контент третьего слайда
	</li>

</div>

<!-- Слайдер -->
<script type="text/javascript" src="/javascript/proLose.js"></script>

Чуть ниже блока слайдера с id="slider" я подключил еще один JS файл. В него я поместил все настройки нашего слайдера, и загрузил файл в папку /javascript/.  Создайте в блокноте новый документ, добавьте в него следующий код:

$('#slider').anythingSlider({
  // Appearance
  theme               : "default", // Theme name
  expand              : false,     // If true, the entire slider will expand to fit the parent element
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
  vertical            : false,     // If true, all panels will slide vertically; they slide horizontally otherwise
  showMultiple        : false,     // Set this value to a number and it will show that many slides at once
  easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

  buildArrows         : true,      // If true, builds the forwards and backwards buttons
  buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
  buildStartStop      : true,      // If true, builds the start/stop button

  appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

  toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering & hide @ other times
  toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

  startText           : "Start",   // Start button text
  stopText            : "Stop",    // Stop button text
  forwardText         : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
  tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

  // Function
  enableArrows        : true,      // if false, arrows will be visible, but not clickable.
  enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
  enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
  enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.

  // Navigation
  startPanel          : 1,         // This sets the initial panel
  changeBy            : 1,         // Amount to go forward or back when changing panels.
  hashTags            : true,      // Should links change the hashtag in the URL?
  infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
  navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable

  // Slideshow options
  autoPlay            : true,     // If true, the slideshow will start running; replaces "startStopped" option
  autoPlayLocked      : false,     // If true, user changing slides will not stop the slideshow
  autoPlayDelayed     : true,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
  playRtl             : true,     // If true, the slideshow will move right-to-left

  // Times
  delay               : 4000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  resumeDelay         : 000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
  animationTime       : 400,       // How long the slideshow transition takes (in milliseconds)
  delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

  // Callbacks
  onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes
  onInitialized       : function(e, slider) {}, // Callback when the plugin finished initializing
  onShowStart         : function(e, slider) {}, // Callback on slideshow start
  onShowStop          : function(e, slider) {}, // Callback after slideshow stops
  onShowPause         : function(e, slider) {}, // Callback when slideshow pauses
  onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
  onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation
  onSlideBegin        : function(e, slider) {}, // Callback before slide animates
  onSlideComplete     : function(slider) {},    // Callback when slide completes; this is the only callback without an event "e" variable

  // Interactivity
  clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
  clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
  clickControls       : "click focusin", // Events used to activate navigation control functionality
  clickSlideshow      : "click",         // Event used to activate slideshow play/stop button

  // Video
  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
  addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
  isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension
});

Сохраните этот файл с именем proLose.js (расширение обязательно .js), и загрузите файл на сайт, например в папку /javascript/, вы можете создать ее самостоятельно, если она у вас отсутствует.

Ну вот, теперь у вас все должно заработать, если вы все сделали так, как я описал. :) Если возникнут вопросы, задавайте в комментариях, с удовольствием отвечу!)

 

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях