Новости

Anything Slider - JQuery слайдер контента для Wordpress

02.09.2018

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

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

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

#2. Верстаем сайдбар и контент под Wordpress на Bootstrap 4 + Sass | Реальный заказ

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

Как сделать слайдер таймлайн на jQuery | Timeline.js slider jQuery

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

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

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

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

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

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

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

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

Тут ничего менять не надо. Библиотеки 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/, вы можете создать ее самостоятельно, если она у вас отсутствует.

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