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

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

<

div style=»margin-left:0px»>

  • Его можно добавить как слайд-шоу заголовка или внутри области содержимого. В этой статье мы обсудим вставку области инсайдерского контента. Если вы ищете слайд-шоу заголовков, ознакомьтесь с нашей отдельной статьей о том, как вставить слайд-шоу заголовков на бесплатный сайт 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
Таблица стилей:
Демо-изображения:
  • toystory.jpg
  • up.jpg
  • walle.jpg
  • nemo.jpg

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

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

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

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

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

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

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

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

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

<link rel="stylesheet" href="https://www.webnots.com/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-bar">
<div id="slider" class="nivoSlider"> 
<img src="https://www.webnots.com/files/theme/nivo/toystory.jpg" data-thumb="https://www.webnots.com/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="https://www.webnots.com/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="https://www.webnots.com/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

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

<script src="https://www.webnots.com/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-адреса изображений своими собственными.

Настройка слайдера Nivo

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

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

<div class="slider-wrapper theme-dark">
<div id="slider" class="nivoSlider"> 
<img src="https://www.webnots.com/files/theme/nivo/toystory.jpg" data-thumb="https://www.webnots.com/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=»su-note» id=»» style=»border-color:#cdcecb;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;»>

<

div class=»su-note-inner su-u-clearfix su-u-trim» style=»background-color:#e7e8e5;border-color:#ffffff;color:#000000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;»>

  • бар«> — Это тема для бара.
  • по умолчанию«> -Это для темы по умолчанию
  • свет«> -Это для светлой темы
  • тьма«> -Это для темной темы

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

Все стили, используемые для слайдера, определены в файле «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.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *