TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Бесплатный виджет слайдера Nivo для Weebly

33

Weebly предлагает простой элемент слайд-шоу для вставки слайдеров на ваш сайт. Многофункциональное слайд-шоу с несколькими эффектами перехода – одна из недостающих частей Weebly. Давным-давно Weebly предлагала слайд-шоу заголовков для пользователей Pro, которое также было удалено из всех адаптивных тем. Мы протестировали различные слайдеры и пришли к выводу, что популярный слайдер Nivo с модификациями будет лучшим для пользователей Weebly. Слайдер Nivo – один из самых известных слайдеров в Интернете, который по умолчанию используется в различных темах. Вы можете легко добавить красивые эффекты перехода с помощью jQuery и настроить ползунки в соответствии с вашими потребностями. В этой статье мы обсудим, как добавить бесплатный виджет слайдера Nivo на свой сайт Weebly. Ползунок можно вставить в любое место вашего сайта Weebly, но не более одного слайдера на страницу.

Возможности виджета Nivo Slider

Ниже приведены некоторые из основных моментов бесплатного виджета слайдера Nivo для Weebly:

  • Его можно добавить как слайд-шоу заголовка или внутри области содержимого. В этой статье мы обсудим вставку области инсайдерского контента. Если вы ищете слайд-шоу заголовков, ознакомьтесь с нашей отдельной статьей о том, как вставить слайд-шоу заголовков на бесплатный сайт Weebly.
  • Слайдер Nivo предлагается с 4 различными стилями тем: светлая, полоса, темная и по умолчанию.
  • Вы можете добавить 12 различных эффектов перехода – разрезать вниз вправо, сдвинуть вниз влево, разрезать вверх вправо, разрезать вверх влево, разрезать вверх, разрезать вверх вниз влево, сложить, исчезнуть, случайное поле, окно дождя, обратное окно дождя и окно дождя растут задний ход.
  • К каждому слайду можно добавить разные эффекты перехода.
  • Легко добавить текстовую подпись и подпись со ссылкой. Вы также можете привязать изображения слайдеров к нужной странице вашего сайта.
  • Используйте простые элементы управления, например кнопки навигации, для перехода к предыдущим и следующим слайдам.

Как добавить виджет слайдера Nivo на сайт Weebly?

Демонстрационный слайдер имеет четыре изображения и использует эффект перехода, определенный для каждого изображения отдельно в HTML-коде. Второе изображение (up.jpg) используется в качестве ссылки для подключения к веб-странице с текстом подписи внизу. Четвертое изображение (nemo.jpg) имеет заголовок со ссылкой HTML.

Шаг 1 – Подготовьте изображения

Первый шаг для любого слайд-шоу – подготовка изображений. В демонстрациях мы использовали 4 изображения размером 618 x 246 пикселей каждое. Мы рекомендуем использовать аналогичное соотношение для изображений большего размера для лучшего качества.

Шаг 2 – Загрузите файлы слайдера

Нажмите кнопку ниже, чтобы загрузить все необходимые файлы для слайдера Nivo, в том числе четыре изображения, используемые для демонстрационных целей.

Загрузите все файлы слайдеров nivo.

Файл zip-архива содержит 12 файлов, как показано ниже:

Навигационные изображения

  • arrow_bar_default.png
  • стрелки_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

Скрипты:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Таблица стилей:

  • тема-стили.css

Демо-изображения:

  • toystory.jpg
  • up.jpg
  • walle.jpg
  • nemo.jpg

Вы можете удалить демонстрационные изображения и использовать свои собственные на своем сайте Weebly.

Шаг 3 – Загрузите файлы слайдера

Войдите в свою учетную запись Weebly и отредактируйте сайт, на котором хотите добавить слайдер Nivo. Перейдите в «Тема> Редактировать HTML / CSS» и перейдите в раздел «Активы». Нажмите кнопку «+» и затем создайте новую папку.

Бесплатный виджет слайдера Nivo для Weebly

Создание новой папки в редакторе кода Weebly

В этом примере мы создаем папку с именем «nivo» и загружаем все 12 файлов, загруженных на шаге 2.

Бесплатный виджет слайдера Nivo для Weebly

Загрузка файлов в Weebly

Шаг 4 – Вставка кода на страницу

Теперь перейдите на страницу, на которую вы хотите добавить слайдер Nivo, и вставьте следующий код, используя элемент «Вставить код».

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Опубликуйте свой сайт, чтобы увидеть красивый слайдер Nivo.

Хотя приведенный выше код можно вставить с помощью элемента «Вставить код», рекомендуется добавить ссылку CSS в разделе «Страницы> Ваша страница> Настройки SEO> Код заголовка».

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

И JavaScript в разделе «Страницы> Ваша страница> Настройки SEO> Код нижнего колонтитула».

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Не забудьте заменить URL-адреса изображений своими собственными.

Настройка ползунка уровня

Эффект перехода для изображений

Эффект перехода контролируется с помощью параметра «data-transition» для каждого изображения. Случайные эффекты будут использоваться при удалении параметра data-transition из HTML-кода. Например, приведенный ниже код HTML приведет к эффекту случайного перехода с темной темой.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Вы можете использовать одно из следующих 12 значений параметров перехода данных для каждого изображения на ползунках, чтобы иметь разные эффекты:

  • sliceDownRight
  • sliceDownLeft
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • складывать
  • тускнеть
  • boxRandom
  • коробкаДождь
  • коробкаДождьРеверс
  • коробкаДождьРост
  • коробкаДождьРост

Использование другой темы

Тема для слайдера определяется с помощью класса CSS «theme-NAME». В приведенном выше примере тема бара использовалась как «панель тем». Вы можете использовать одну из 4 тем, заменив название темы, как показано ниже:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Настройка стилей

Все стили, используемые для слайдера, определены в файле «theme-styles.css». Он имеет наборы стилей для четырех тем и оболочку слайдера. Вы можете настроить ширину, размер шрифта и цвет подписей в этом файле.

Настройка скрипта

В основном в этом слайдере используются два скрипта: один – это библиотека Google jQuery, а другой – пользовательский скрипт слайдера Nivo, распространяемый по лицензии MIT. Все основные переменные для ползунка определены в файле «jquery.nivo.slider.nod.js», как показано ниже в разделе «// Настройки по умолчанию»:

  • effect: ‘random’ – по умолчанию будут применяться случайные эффекты перехода
  • ломтики: 15 – Изображение нарезано на 15 частей
  • boxCols: 8 – изображение разбито на 8 столбцов
  • boxRows: 4 – изображение разбито на 4 строки
  • animSpeed: 500 – скорость анимации по умолчанию 500 мс, уменьшите для ускорения перехода
  • pauseTime: 3000 – Время паузы между слайдами в 3000 мс
  • startSlide: 0 – Начальный слайд является первым (0) слайдом
  • directionNav: true – Показать кнопки навигации по направлению (false, чтобы скрыть)
  • controlNav: true – Показать маркеры навигации по элементам управления (false, чтобы скрыть)
  • controlNavThumbs: false – Скрыть эскизы навигации вместо маркеров (true для отображения)
  • pauseOnHover: true – Приостановить слайд-шоу при наведении указателя мыши на изображение
  • manualAdvance: false – По умолчанию автоматическое вращение включено, вы можете включить ручное перемещение изображений.
  • prevText: ‘Prev’ – предыдущий текст изображения
  • nextText: ‘Next’ – текст следующего изображения
  • randomStart: false – случайный запуск отключен

Примечание. Не удаляйте комментарии об авторских правах из файла «jquery.nivo.slider.nod.js». Мы понимаем, что первоначального разработчика Dev7Studios больше не существует, и сайт перенаправляется на плагин WordPress. Но сохраните уведомление без изменений для справки. Поскольку функция $ больше не поддерживается в Weebly, мы заменили все $ в скрипте на jQuery.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее