Как сделать текст поверх слайдера
WordPress.org
Русский
Поддержка → Проблемы и решения → Вставка текста и изображений в слайдер из админпанели
Вставка текста и изображений в слайдер из админпанели
Уважаемые форумчане, подскажите пожалуйста.
Есть слайдер выведенный на странице кодом. И вот возникла необходимость добавлять в слайдер фото и тексты из административной панели. Каким образом можно это сделать?
Как-то добавлял фото на другом сайте с помощью «Группы полей» (плагин Advanced Custom Fields), а можно ли с помощью этого плагина добавить текст?
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
Каким образом можно это сделать?
Выкинуть «выведенный на странице кодом» и использовать готовые плагины.
Или писать свой.
Как-то добавлял фото на другом сайте с помощью «Группы полей» (плагин Advanced Custom Fields), а можно ли с помощью этого плагина добавить текст?
?
У вас самописный слайдер?
Плагин слайдера и выведен через шорткод в шаблоне страницы?
Да слайдер самописный, и выведен кодом прямо в страницу — то есть вся страница сделана кодом.
1. выкинуть его и взять нормальный слайдер из оф. каталога
или
2. написать весь требуемый функционал для админки.
то есть вся страница сделана кодом.
если эта загадочная фраза означает, что тем тоже самописная, то ее нужно выкинуть и установить нормальную из оф. каталога.
если эта загадочная фраза означает, что тем тоже самописная…..
Судя по названию темы, аналогичной названию сайта, это именно так.
https://rci.company/wp-content/themes/rci/css/lightgallery.css
Никогда не пойму что заставляет применять самописные темы и быть может даже платить немалые деньги за их «разработку» и потом еще иметь с этого кучу проблем? Стремление к неповторимости и оригинальности сайта? Но это стремление, я так понимаю, рождено неумением сделать неповторимый и оригинальный сайт на любой бесплатной теме из оф. каталога.
Прошу прощения за почти офтоп.
Никогда не пойму что заставляет применять самописные темы
Как правило, полет дизайнерской мысли. И чем выше полет, тем проще сделать Тему полностью с нуля, чем переделать даже самую похожую.
Что заставляет привлекать дизайнера? Иногда карго-культ: люди почему-то думают, что если оформить свой вукоммерц в стиле Амазона и добавить туда бантики и рюшечки с АлиЭкспресс, то они мигом станут богатыми, как Джефф Безос и Ма Юнь вместе взятые. Иногда желание круто выпендриться перед коллегами-конкурентами. И в редких случаях — целесообразность.
Прошу прощения за совсем офтоп.
Как правило, полет дизайнерской мысли.
По моим наблюдениям (включая общение на неск. форумах) есть 2е основных причины (глобально одна: завышенное ЧСВ)
1. «В репо все УГ, а мы же не дураки — пхп знаем. И «уроков» полно». Правда, при ближайшем рассмотрении оказывается, что 99% из них не в состоянии разобраться даже что такое дочерняя тема и как поменять что-то, что глубже шаблона — функции во вложенных файлах.
2. «Мы же не бомжи» (и его разновидности вида «как на нас посмотрят другие если у нас «бесплатный шаблон»).
Т.е. есть некое предубеждение к бесплатному, но при этом их нисколько не смущает сам бесплатный ВП 🙂
И есть небольшое кол-во случаев, когда это реально нужно. Ещё меньше — когда при этом есть кому это делать и поддерживать.
Не далее как сегодня в коментах одного сайта разработчика под ведроид встретил коммент умника: «почему у такого серьёзного разработчика сайт на шаблоне Вордпресс — денег нет на нормальный сайт?». Именно так — не «на ВП» и не про бесплатную тему, а умник даже не понимает что такое CMS в принципе, но слышал что ВП бесплатный и это «не серьёзно»…
[/офтоп]
Как правило, полет дизайнерской мысли. И чем выше полет, тем проще сделать Тему полностью с нуля, чем переделать даже самую похожую.
Только люди не хотят понимать, что через полгода — год нынешний разработчик может стать недоступным и чтобы внести какие-то изменения в тему придется искать другого, который может запросить денег больше, чем за разработку с нуля — ковыряться в чужом коде всегда не просто.
А бесплатной помощи и вовсе не получишь, по той же самой причине.
Спасибо, идея в общем понятна. Подскажите тогда плагин какой можно использовать для карусели, чтобы вставить его с помощью php. (Гуглом пользоваться умею — хотелось бы узнать ваше мнение.)
Гуглом пользоваться умею — хотелось бы узнать ваше мнение.
Не надо гуглом. Нужно оф каталогом https://wordpress.org/plugins/ (на всzкий случай см п9)
А мнения у всех разные, как и задачи. Выбирайте какой подойдет Вам.
Наверное все плагины позволяют вставлять шорткодом (а сам шоткод вставляется «кодом» через echo do_shortcode(‘[shortcode]’); ). Некоторые и сразу php-функцию дают.
«Гуглить» сейчас все умеют, начиная с детского сада. А вот осознанно и целенаправленно пользоваться поиском плагинов и тем для WP умеет далеко не каждый, приходящий сюда за помощью. Таково вот наше мнение.
https://wordpress.org/plugins/search/carousel+slider/
Понятно. А каким образом можно найти нужный плагин из такого обилия — по каким критериям? Например, тех же плагинов про «Карусель» — 63 страницы в 2 ряда.
Понятно. А каким образом можно найти нужный плагин из такого обилия — по каким критериям? Например, тех же плагинов про «Карусель» — 63 страницы в 2 ряда.
Выбор (любой) очень сложный и ответственный вопрос. И советы тут — дело неблагодарное.
Но в качестве совета :
1. У каждого плагина есть описание и скриншоты. Инструкции и служба поддержки. У многих есть ссылки на демо-версии. Онлайн-переводчики вам в помощь если проблемы с буржуйским языком.
2. При изобилии аналогичных плагинов следует избегать давно не обновлявшихся плагинов, не соответствующих текущей версииWP. Хотя не факт что старые плагины не будут работать.
3. Старайтесь избегать плагинов в которых слишком много опций только в платной про версии. Или вообще проходить мимо увидев что есть PRO версия, при наличии кучи бесплатных аналогов.
3. Старайтесь выбирать плагины с настройками на русском, если не в ладах с английским. (О наличии перевода можно узнать в описании плагина)
Но самое главное надо запастись терпением и временем чтобы установить и разобраться в настройках приглянувшихся плагинов.
О наличии перевода можно узнать в описании плагина
В описании не всегда есть и не всегда актуально.
Надежнее переключится на вкладку «Development» и там кликнуть по ссылке «Translate [плагин] into your language.»
После в открывшейся таблице найти Russian и посмотреть % перевода в Stable. Если >95%, то перевод сам подтянется. Если меньше, то можно его вручную загрузить.
Но это вся справедливо если автор правильно подготовил плагин к переводу.
И ещё. Для экспериментов с плагинами я бы рекомендовал сделать отдельную тестовую установку ВП, а не на рабочем сайте.
Как создать адаптивный слайдер для сайта?
В этой статье рассмотрим процесс создания легкого, простого и адаптивного слайдера для сайта с помощью CSS и JavaScript.
Исходные коды и подключение слайдера к сайту
Проект слайдера расположен на GitHub по этому адресу. Данный слайдер распространяется под лицензией MIT. Его можно использовать бесплатно как в личных проектах, так и в коммерческих. Поблагодарить автора и поддержать дальнейшее развитие слайдера можно на этой страничке.
Основные характеристики слайдера:
Подключение слайдера к странице осуществляется посредством выполнения следующих действий:
Демо слайдера расположено на этой странице.
Инициализация и настройка слайдера
Инициализация карусели осуществляется посредством вызова функции slideShow и указания ей в качестве первого аргумента селектора, определяющего слайдер в документе:
Кроме селектора функции slideShow можно передать дополнительные параметры, все они указываются в формате объекта посредством 2 параметра:
Например, если вам нужно инициализировать слайдер и включить у него автоматическую смену слайдов, то используйте следующую конструкцию:
Кроме этого, вы можете управлять слайдом с помощью методов. Для этого вам нужно сохранить в переменную результат выполнения функции slideShow :
После этого вы можете использовать его методы. Например, для того чтобы программно выполнить переход на следующий слайд необходимо просто вызвать метод show :
Список методов слайдера:
Примеры использования слайдера для ротации различной информации
Применение слайдера для ротации изображений:
Использования слайдера для ротации текстовой информации:
Пример использования слайдера для отображения отзывов:
Применение слайдера для ротации товаров:
Описание исходных кодов слайдера и принципа его работы
Исходные коды слайдера состоят из:
HTML структура слайдера:
Время и скорость, с которой будет осуществляться трансформация определяется с помощью CSS свойства transition:
Логика работы слайдера:
Код слайдера написан на «чистом» JavaScript, без использования библиотеки jQuery. Программный код структурирован и организован в виде «модуля».
Основные функции, выполняющие всю логику, используемые внутри модуля slideShow :
Данные функции организуют логику работу слайдера. Они доступны как было уже отмечено выше только внутри модуля, к ним нельзя обратиться вне его.
Что делать если слайдер не работает?
Если слайдер не работает, то одной из причин может быть то, что у вас скрипт подключен выше самого HTML кода слайдера. В этом случае JavaScript код слайдера необходимо обернуть в эту конструкцию (чтобы он отрабатывал после загрузки DOM страницы):
CSS слайдер
С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии
Общая информация.
Стандарты и префиксы
Свойства transition, animation и transform уже давно, в том или ином виде, реализованы во всех популярных браузерах. 6 июня 2012 года W3C объявил, что эта часть разрабатываемого стандарта CSS 3.0 кардинально меняться не будет, и рекомендовал реализовать её всем браузерам уже сегодня.
Для front-end разработчиков это означает появление стандарта, на который можно опираться. Теперь не надо бояться, что в будущем какой-либо браузер откажется от своего префиксного нестандартного свойства – ведь оно будет продублировано стандартным свойством и заменит его при необходимости.
Устаревшие версии Internet Explorer, к которым скоро можно будет отнести даже 9 версию, не поддерживают transition, animation и transform ни в каком виде. Но их доля всё ещё превышает 10%.Для IE7-9 предлагается js-«заглушка», а эффекта плавного переключения между слайдами – ничего.
Почему CSS, а не JS?
Есть множество задач, которые можно решить при помощи CSS: интерактивные галереи, многоуровневые выпадающие меню, построение и анимация трёхмерных диаграмм… Зачем же использовать CSS, когда можно все сделать на JS, особенно учитывая массу готовых наработок? Основные аргументы могут быть такими:
Реализация
Итак, для именования CSS классов использовалась методология Блок Элемент Модификатор (БЭМ). Суть в том, что вёрстка основана на компоновке страницы из независимых блоков. Согласно БЭМ у блока могут быть элементы, но только внутри блока.
Анимация
Анимационная последовательность по ключевым кадрам для трёх слайдов выглядит следующим образом:
Особенность реализации слайдера в том, что всем слайдам и всем кнопкам присваивается одна и та же анимация:
Такой подход позволяет серьезно сократить объем кода, ведь все анимации пока ещё приходится дублировать их префиксными версиями (@-webkit-keyframes, @-moz-keyframes и @-o-keyframes), а каждую такую «стопку» правил надо отдельно описывать для каждого требуемого (заказчиком) числа слайдов. Если отдельно описывать анимацию ещё и для каждого слайда, то объем кода может составить десятки килобайт.
Чтобы этого избежать, но последовательно анимировать все слайды и кнопки при помощи одной анимации, достаточно расставить смещение начала анимации во времени для каждой пары слайд + кнопка:
Для первой пары остаётся значение по-умолчанию – нулевое смещение.
Также важно, что смещение не зависит от количества слайдов, и может быть описано один раз для их максимального количества.
В итоге плавный анимированный переход между слайдами выглядит так:
Пауза при наведении курсора
Для случая, когда пользователь хочет задержать слайд на экране, но не хочет отключать ротацию, можно использовать режим паузы по наведению курсора над слайдом:
Переключение по клику
Есть целый ряд CSS «событий», переключающих состояние html элемента. Если говорить о клике мыши, то это появление псевдоклассов :focus, :target, или :checked у одного из элементов страницы. Псевдокласс :focus может быть не более чем у одного элемента на страницу единовременно; псевдокласс :target засоряет историю браузера и требует наличие тега «a»; псевдокласс :checked запоминает состояние до ухода со страницы, плюс, в случае радиокнопок, является дискретным переключателем, когда выбран может быть только один элемент конкретной группы – то, что нужно.
В селекторах ниже уровня 4 переключить состояние произвольного элемента (например, opacity слайда) можно только в связке с радиокнопкой, при помощи селекторов соседей + и
. Переключить можно как стили соседа, так и стили потомков соседа, но в любом случае сосед должен находиться после радиокнопки.
Было использовано переключение opacity слайда – контейнера, который содержит картинку. Это более универсальный способ, чем переключение свойств картинки, поскольку в div-контейнер, в отличие от пустого элемента img, можно поместить любую дополнительную информацию (например, название слайда, или связанное описание, включая ссылки).
Для слайдов указаны свойства transition, которые позволяют сделать переключение между ними плавным.
Остановка ротации при выборе слайда
Поскольку анимация, пусть и одинаковая по структуре, есть у каждого слайда, а выключать надо анимацию всех слайдов (иначе в плавном переходе будут участвовать три слайда), все радиокнопки надо располагать до первого слайда.
Более того, все кнопки (лейблы радиокнопок) надо группировать в отдельном блоке и помещать после радиокнопок, иначе могут возникнуть проблемы с универсальным позиционированием лейблов для произвольного числа слайдов.
Остановка анимации всех слайдов и кнопок при выборе любого слайда задаётся следующим образом:
Произвольное число слайдов
Сделать универсальный слайдер под любое число слайдов невозможно, потому что под каждое число требуется своя «стопка» CSS-правил анимации. Каждую такую «стопку» (если она описана) можно подключать через модификатор блока slider:
где X – число слайдов.
Для поддержки некоторых старых браузеров первый слайд не анимируется. По этой причине контейнер первой картинки имеет opacity всегда равный 1.0. Возникает проблема: при плавном переключении двух других слайдов между собой, первый просвечивает (это может быть и background родителя блока slider). Для удаления эффекта просвечивания устанавливается задержка transition-delay для всех слайдов, кроме выбранного; для выбранного же устанавливается z-index больше, чем у всех остальных:
Чтобы слайды не конфликтовали с другими элементами сайта (например, не перекрывали выпадающее меню с z-index менее или равным 6), создаём свой контекст (stacking context) для блока путём задания минимально, необходимого для видимости, z-index`а:
Уже сегодня, без навыков программирования и специализированных библиотек, до своей окончательной стандартизации, CSS 3.0 позволяет реализовывать сложные и интересные задачи. Описанный интерактивный слайдер, на текущий момент, полностью работоспособно у 80% пользователей рунета. Для большей части оставшихся пользователей, а именно для пользователей браузеров IE7-9, можно использовать js-«заглушку», которая реализует основной функционал слайдера.
Слайдер для перелистывания текста
Карусель со стрелками перелистывания текста
Извените если не там написал. Сделайте пожалуйста чтобы ссылки открывались в этом же окне (чтобы.
Как сделать слайдер с изменением текста?
помогите найти информацию как сделать такой слайдер, в соответсвии с выбраной картинкой изменяется.
Автоматический слайдер картинок с отключением автоматического перелистывания при ручной навигации
Здравствуйте! Нашел в сети код на автоматический слайдер картинок. Слайдер отлично сполняется со.
Кнопки для перелистывания вложений
как сделать что бы кнопка листала только вложенное?
Вложения
 | probnoe_slider.zip (15.8 Кб, 5 просмотров) |
Решение
Вложения
| probnoe_slider.zip (16.2 Кб, 5 просмотров) |
Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.
Написать код для перелистывания картинок
Код для перелистывания картинок вперёд и назад в вижуал бейсик,каждая картинка в отдельном.
Форма для проссмотра и перелистывания изображений
Всем привет..) Есть такая задачка) нужно создать форму в Delphi7 для проссмотра и перелистывания.
Добавить кнопки для перелистывания вперед/назад
И опять в очередной раз прошу помощи. Есть каталог в интернет магазине и при подробном виде.
Как вставить для перелистывания годов картинку-стрелку в span в js
Здравствуйте! Есть календарик. Под стили нужно сделать стрелку для перелистывания годов, в данный.
JavaScript Создать веб-страницу для перелистывания и автоматического просмотра картинок
Здравствуйте! Прошу помощи в JavaScript. У нас просто это все не объяснялось на лекциях, а.
Простейший слайдер текста
Всем доброго времени суток, возникла необходимость в маленьком слайдере.Нет ли ни у кого готового.