Owl carousel не работает wordpress

Owl.carousel

Решение

Черт знает что происходит, когда подключаю скрипты в footer.php все работает, а когда в functions.php ничего не работает слайдер попросту пропадает, вот так у меня подключены сейчас скрипты:

wp_enqueue_script( ‘fancybox-script’, get_template_directory_uri().’/assets/gallery/fancybox/script/jquery.fancybox-1.3.4.pack.js’, array(‘jquery’), ‘1.0’, true );

wp_enqueue_script( ‘easing-script’, get_template_directory_uri(). ‘/assets/gallery/fancybox/script/jquery.easing-1.3.pack.js’, array(‘jquery’), ‘1.0’, true );

wp_enqueue_script( ‘mousewheel-script’, get_template_directory_uri().’/assets/gallery/fancybox/script/jquery.mousewheel-3.0.4.pack.js’, array(‘jquery’), ‘1.0’, true );

wp_enqueue_script( ‘sib-building-script.js’, get_template_directory_uri().’/assets/js/script.js’, array(‘jquery’), ‘1.0’, true );

wp_enqueue_script( ‘owl.carousel-script’, get_template_directory_uri(). ‘/assets/js/owl.carousel.js’, array(‘jquery’), ‘1.0’, true );

Вот этот скрипт от карусели я отключил, так как у WP уже есть встроенный jquery да и потом куда и как подключать такого рода скрипты с относительным адресом? https://ajax.googleapis.com

// wp_enqueue_script( ‘jquery.min.js’, get_template_directory_uri(). ‘https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ , array(), ‘1.0’, true );

Потом в консоле выдает ошибку такого рода

и пишет Uncaught TypeError: $ is not a function

вот сам код опять же куда его подключать в какой файл и как ? через эту функцию его же не подключить? wp_enqueue_script

Галерея fancybox тоже блин не работает да же не открывает html-код при нажатии на изображение перебрасывает на несуществующею страницу вместо того чтобы открывать большую копию изображения в том же окне. assets/gallery/big/1.jpg

Вот скрин страницы на которую перекидывает

В общем наверное нужно с самых азов изучать WP потому что видимо не понимаю логики его работы а леплю все подряд.
Но html — код должен же работать.

Добавлено через 52 минуты
Все карусель заработала дело было в этом скрипте

Нужно было так написать

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Источник

Слайдер Owl Carousel 2 — как подключить, настройки, пример для WordPress

Недавно в ходе работы над одним сайтом нужно было реализовать слайдер на главной странице. Проект создавался на WordPress, но предоставленная клиентом верстка была достаточно специфичной, и решить задачу с помощью соответствующих плагинов оказалось невозможным. Из сторонних скриптов мне больше всего понравилось решение Owl Carousel 2. Многие разработчики его советовали, и как оказалось, не зря! Поэтому сегодня расскажу как подключить Owl Carousel 2 к любому сайту, а также рассмотрю настройки и его интеграцию в WordPress.

Всю информацию по слайдеру вы можете найти на этой странице. Насколько я понимаю, Owl Carousel 2 — это вторая версия скрипта, более мощная и функциональная (с первой не совместима). Работает со всеми современными браузерами: Firefox, Chrome, IE7/8/10/11, Opera, Safari (iPad, iPod4), Galaxy S4, Nexus 7 Chrome, Nokia 8s Windows8 и т.п.

Основные преимущества:

• Более 60-ти опций настройки, в которых разберется даже новичок. Основные из них: бесконечная прокрутка, центрирование, отступы, разная ширина элементов, вставка видео и т.п.
• Перетаскивание картинок мышкой (как для мобильных устройств, так и для десктопов).
• Практически все опции скрипта включают адаптивность.
• Owl Carousel 2 использует технологию переходов CSS3 Translate3d. Работает быстро и красиво.
• Для старых браузеров поддерживается CSS2.
• Модульная структура — отключайте ненужные плагины, добавляйте другие решения.

В общем, как видите, у слайдера одни сплошные плюсы. К тому же, если верить официальному сайту, к выходу готовится очередная версия, где будет еще больше фишек и улучшенный API. Но пока этого не произошло оценим работу старого варианта.

Подключение Owl Carousel 2

Рассмотрим детальнее как подключить Owl Carousel 2 на обычный сайт. Первым делом вам нужно зайти на официальный сайт скрипта и нажать по кнопке Download в правом верхнем углу страницы. Как вы уже поняли, скачать Owl Carousel 2 можно абсолютно бесплатно. Затем распаковываете архив и загружаете его файлы на ФТП сайта в предварительно созданную директорию owlcarousel.

Для интеграции скрипта нужно выполнить несколько шагов:

1) Добавление CSS в область HEAD вашего шаблона

Первый файл здесь является обязательным и должен быть подключен до *.js скриптов. Вторая строка задает оформление вашего слайдера в том числе и элементы управления (кнопки). Можете отредактировать owl.theme.default.min.css под стилистику своего проекта или вообще убрать.

2) Подключение JS

Скрипт owl.carousel.min.js желательно добавлять в футере вашей темы. Что касается jquery.min.js, то он, как правило, уже включен в разные шаблоны. Если же его там нет, добавьте.

3) Добавление HTML кода

Какой-то особой разметки для настройки Owl Carousel 2 не нужно. Требуется лишь поместить элементы слайдера внутрь контейнера

Если хотите добавить стили по умолчанию для блока навигации (точек, стрелочек), допишите во внешнем контейнере класс owl-theme.

4) Вызов плагина

Для активации скрипта Owl Carousel 2 используется следующая функция (размещается в HEAD после строк подключения CSS и JS файлов).

Это все, что касается теории. Реальные варианты кода можете посмотреть на сайте слайдера или в следующих разделах данной статьи.

Настройки и примеры Owl Carousel 2

Выбираете из верхнего меню раздел Demos, где находятся примеры использования Owl Carousel 2. Они демонстрируют базовые фишки скрипта, а также работу со встроенными плагинами и сторонними библиотеками. Посмотрим на самый первый вариант из «Basic demos».

Для HTML тут используется следующий код:

В контейнере видите классы owl-carousel owl-theme, о которых мы говорили выше. В качестве элементов может использоваться не только DIV (попробуйте img, span, a). Для настройки Owl Carousel 2 и вызова функции такой код:

Здесь видите такие опции как: отступ margin, вывод навигации nav:true и loop:true, отвечающую за бесконечную прокрутку Owl Carousel 2. Также задается количество объектов для разных разрешений экрана, улучшая адаптивность слайдера.

Все настройки можете найти опять же на официальном сайте в разделе Dosc. В меню слева будет блок API и подпункты Options, Classes, Events (опции, классы, события) с детальным их описанием. Чуть ниже — информация по плагинам, внешним библиотекам, Sass стилям и т.п.

Но вернемся к настройкам Owl Carousel 2. Вот пример из создаваемого мною сайта:

• items — число отображаемых элементов на экране;
• autoplay — автоматическая прокрутка слайдов;
• autoplayTimeout — скорость смены картинок;
• loop — бесконечный цикл;
• mouseDrag — отключение перетаскивания мышкой;
• dots — точки в качестве навигации;
• margin — отступы;
• itemElement — DOM элемент для объектов (слайдов);
• stageElement — DOM элемент контейнера для элементов слайдера;
• dotsClass — класс блока навигации.

Больше информации ищите в разделе Dosc. Как я сказал выше, там есть все описания опций с их возможными значениями. Реально разобраться не сложно.

Owl Carousel 2 для WordPress

В принципе для wordpress есть несколько интересных плагинов каруселей (слайдеров) но в моем конкретном случае они не подошли. Также нашел модуль для первой версии скрипта, но он не обновлялся два года и является морально устаревшим. Поэтому пришлось реализовывать интеграцию Owl Carousel 2 с WordPress самостоятельно. Расскажу вкратце про алгоритм решения этой задачи.

Самое простое здесь — базовое подключение Owl Carousel 2 и настройка его опций. Внедрить CSS, JS и организовать вызов функции можно разместив соответствующий код в файлы шаблона header.php и footer.php. Но как быть с HTML разметкой для элементов слайдера (картинка + заголовок)? Пользователь ведь должен иметь возможность менять их через админку.

Есть несколько вариантов решения, но я бы советовал обратить внимание на модуль Custom Field Suite. Данный плагин позволяет создавать пользовательские поля разных типов: тексты, даты, загрузчики файлов, циклы и т.п. Я не буду детально останавливаться на его функциях (они описаны в обзоре Custom Field Suite) покажу лишь формат созданного мною пользовательского элемента.

На картине выше найдете элемент mainslider типа «Loop» — цикл, позволяющий создавать несколько разных блоков одного и того же формата. Для него определены 2 составляющих: mainslider_image (загрузка файла, возвращает URL) и mainslider_title (текстовая область). Таким образом пользователь сможет создать несколько слайдов, состоящих из картинки и заголовка.

Чтобы интегрировать эти данные в сам сайт, открываете файл шаблона, где должен размещаться слайдер (например, index.php), и пишите код на подобии следующего:

get( ‘mainslider’ ); if( ! empty($slider_fields) ): ?>

Общую структуру для слайдера я брал из своего сверстанного файла шаблона, поэтому классы slide__image, slide__text, точно также как и размеры картинки не являются обязательными (у вас, наверняка будут другие). В этом коде нужно понимать несколько вещей:

• В первой строке считываются данные из элемента mainslider (созданного в админке вордпрес) и записываются в переменную $slider_fields.
• Дальше через foreach обходятся все элементы массива $slider_fields и для каждого создается отдельный слайд из картинки и заголовка.
• Внешний контейнер DIV имеет класс owl-carousel как и требуется для Owl Carousel 2.

Кстати, в сети видел реализацию подключения Owl Carousel 2 через модуль Advanced Custom Fields, но там пользовательские типы полей Loop и Галерея в бесплатной версии не распространяются (только PRO). Теоретически, можно реализовать задачу и через создание своего виджета, но мне кажется Custom Field Suite наиболее подходящий плагин в данном случае.

Итого для интеграции Owl Carousel 2 нужно:

1. Скачать скрпит с официального сайта.
2. Подключить CSS и JS файлы.
3. Разместить код вызова функции с нужными настройками.
4. Сгенерировать соответствующий HTML код на странице сайта.

Если хотите что-то добавить по теме или поделиться другими интересными скриптами слайдера, пишите в комментариях.

Спасибо, все работает))

Отличное решение. Действительно со стабильной работой слайдеров в ВП прям беда какая-то. Обновил движок и проверенный годами слайдер начал ломать структуру. Вот и ищу альтернативу.

тем, кто скрипты и стили сует в хедер-футер, я бы ноги выдергивал. очень вредно для последующей оптимизации скорости сайта. в wordpress есть стандартные (правильные!) механизмы подключения.

Евгений, ну первая часть статьи это скорее интеграция Owl Carousel 2 для любых сайтов, а вторая под вордпресс. И там я уже детально не рассписывал, хотя согласен можно было привести код:) но, каюсь, для сайта вставлял именно через HEADER. В качестве стандартных механизмов я так понимаю вы имеете ввиду wp_enqueue_script? В связи с этим несколько вопросов: а ли сильно подключение через стандартные механизмы быстрее чем размещение HTML в шаблоне? (многие шаблоны ведь содержат скрипты) Я бы еще понял, когда добавлять вызывается в футере, но в HEADER неужели там серьезный прирост производительности? И еще вопрос — а как добавлять туда функцию jQuery(function($)< с параметрами?

Дело вот в чем. У WordPress есть масса решений, которые 1. не только при необходимости перемещают скрипты и стили в нужное место html-кода, чтобы не блокировать загрузку компонентов страницы (да, файлы некоторых типов не разрешают параллельную загрузку других файлов)… 2. но и объединяют скрипты и стили в соответствующие файлы, существенно снижая количество загружаемых файлов (что дает значительный прирост скорости). Эти решения работают только при каноническом подключении скриптов и стилей, поэтому.
Каноническое подключение, да, через wp_enqueue_script и wp_enqueue_style. К каноническим решениям я также отношу аккуратную работу с встроенными в html скриптами. Они должны быть вставлены после wp_footer(), чтобы в нем можно было вызвать (к примеру, после переноса «массой решений») остальные скрипты .
Часто достаточно 1. в functions.php прописать add_action(«wp_footer»,»call_script»,99); 2. написать там же функцию «call_script» с html кодом нужного скрипта (и если надо, впиндюрить в ней вывод нужных параметров). Иногда приходится чуть побольше побить в бубен, чтобы встроенный скрипт грузился позже jquery…

Евгений, спасибо за пояснение. Да, хорошо, когда все правильно.

Каждый раз парюсь со стилизацией стрелок ← →

Кто нибудь разобраться как перелистывать сразу несколько блоков?

Внедрение CSS, JS и вызов функции (через созданный файл, к примеру scripts.js) производится через файл function.php

Спасибо, ничего не работает

Сергей, актуальную информацию по скрипту лучше смотеть на сайте разработчиков. Что касается моих кодов, то на момент публикации поста и в конкретно моем сайте все работало… к сожалению, у вас может быть по другому. В любом случае можете взять просто алгоритм/идею подключения слайдера и попытаться реализовать самостоятельно.

Хорошее решение, единственное, что стоит поправить способ подключения скриптов. Все таки не есть хорошо пихать скрипты и стили нелегально руками, лучше зарегистрировать в functions стандартными способами.

Влад, та да, согласен. Просто там не только для WordPress пример был, а в целом. Думаю, разработчики по WP должны быть в курсе этого нюанса с файлом функций.

Tod’s Blog создан для тех, кто хочет научиться зарабатывать в сети и активно интересуется темой монетизации сайтов.

Основные категории блога: партнерки, контекст, биржи ссылок, CPA, веб-разработка и создание сайтов, фриланс, SEO и SMO продвижение, блоггинг и т.п. Информация пригодятся как полным новичкам, так и тем, кто неплохо разбирается в теме онлайн заработка.

Источник

WordPress.org

Русский

OWL Carousel Slider — WordPress Owl Carousel Plugin

Описание

OWL Carousel Slider is a highly customizable and full responsive Carousel Slider plugin for WordPress. This Carousel Slider plugin can be displayed a slider anywhere in your wordpress site.

You can able to use 40+ parameters for customizations with shortcode, which makes it extremely configurable and user friendly. You can use as many instance of this OWL Carousel slider in your site without any type of conflict.

OWL Carousel slider also supports YouTube or Vimeo videos that helps to display video galleries.

New Features of the plugin includes

• Control Displayable Slides Item According Device Width( Viewport ). ( NEW )
• Multiple Instances on One Page. ( NEW )
• Touch swipe navigation. ( NEW )
• Infinity Slides loop. ( NEW )
• Support YouTube/Vimeo videos. ( NEW )

Support

Get Support, Report a Bug or Request a Feature: Contact Now

Live Demo

Live Preview link: See Screenshot Tab.
Learn more about OWL Carousel Slider

Others Available Features

• Responsive & Touch Friendly Slides.
• Strong Administrator Settings
• Background image and color for slider area.
• Shortcode System.
• Slider Widget.
• Fully responsive and mobile ready.
• Strong Settings Options Panel
• One-Click Shortcode Button.
• Owl Carousel Options.
• Touch Enabled Navigation.
• Mouse Drag Enabled.
• Support Shortcode
• Custom Post type Slider.
• Support Images/ Videos/ Description.
• Support Multiple Instance.
• Very Lightweight.
• Easy to Install and Use.
• Fully Translatable
• Unlimited slider anywhere.
• Editable styles with pure CSS or LESS
• Well Organized allow to Customize Easily.
• More+ …

How to use

1. First installed and active the plugin
2. Create a new Category
3. Create new slides
4. Include carousel in your in any content. e.g. post, page, widget, theme
5. Set Default Options from Plugin Settings Menu

For use in post or page :-

For specific category please use category slug in shortcode as :-

For use template php file:-

You can also use custom TinyMCE button to insert shortcode.

If you have any question contact us at Support Link

*Thanks to Bartosz Wojciechowski for Awesome Owl Carousel jQuery Plugin.

Скриншоты

• Slider Front end.
• Slider Front end.
• Slider Front end.
• Slides Settings.
• Slider Widget.
• Slides Settings.
• Slides Settings.
• Slides Settings.

Установка

Uploading in WordPress Dashboard

1. First download the plugin ZIP file from wordpress.org
2. Log in to your website administrator panel
3. Go to the ‘Add New’ in the plugins dashboard, click “Upload Plugin”
4. Upload WordPress Slider ZIP file by choosing it from your download location
5. Click Install Now button
6. Then click Activate the Plugin button.
7. You can see the plugin installed on WordPress left menu.

Using The WordPress Plugin Dashboard

1. Go to the ‘Add New’ in the plugins dashboard
2. Search for ‘lgx-owl-carousel’ or ‘OWL Carousel Slider’
3. Click Install Now button
4. Then click Activate Plugin button
5. You can see the plugin installed on WordPress left menu.

Now you can configure your Plugins options from settings.

How to use

1. First installed and active the plugin
2. Create a new Category
3. Create new slides
4. Include carousel in your in any content. e.g. post, page, widget, theme
5. Set Default Options from Plugin Settings Menu

You can also use custom TinyMCE button to insert shortcode.

Quick Usage

For use in post or page :-

For specific category please use category slug in shortcode as :-

For use template php file:-

You can also use custom TinyMCE button to insert shortcode.

If you have any question contact us at Support Link

Available Shortcode options

• ‘itemlarge'( NEW )
• ‘itemdesk'( NEW )
• ‘itemtablet'( NEW )
• ‘itemtmobile'( NEW )
• ‘navlarge'( NEW )
• ‘navdesk'( NEW )
• ‘navtablet'( NEW )
• ‘navtmobile'( NEW )
• ‘animateout'( NEW )
• ‘animatein'( NEW )
• ‘orderby’
• ‘limit’
• ‘cat’
• ‘color’
• ‘bgcolor’
• ‘bgopacity’
• ‘bgimage’
• ‘itembg’
• ‘margin’
• ‘lazyload’
• ‘loop’
• ‘nav’
• ‘autoplay
• ‘autoplay_timeout’
• ‘add_active’
• ‘hover_pause’
• ‘video’
• ‘dots’
• ‘videoheight’

If you have any question contact us at Support Link

Источник