Здравствуйте, дорогие друзья! Достаточно часто возникает необходимость установить на сайте слайдер контента, и хочется сказать, что сделать это совсем не сложно. Напомню, что чуть ранее я писал, как установить красивый слайдер картинок Nivo Slider. Сегодня мы столкнемся с плагином “AnythingSlider”, который работает на jQuery. Предлагаю вам сразу скачать 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/, вы можете создать ее самостоятельно, если она у вас отсутствует.
Ну вот, теперь у вас все должно заработать, если вы все сделали так, как я описал. :) Если возникнут вопросы, задавайте в комментариях, с удовольствием отвечу!)
