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

Безкоштовний віджет Nivo Slider для Weebly

0

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

Особливості віджета слайдера Nivo

Нижче наведено деякі основні моменти безкоштовного віджета повзунка Nivo для Weebly:

  • Його можна додати як слайд -шоу заголовка або всередині області вмісту. У цій статті ми обговоримо питання про вставку інсайдерського вмісту, якщо ви шукаєте слайд -шоу із заголовками, ознайомтесь із нашою окремою статтею про те, як вставити слайд -шоу із заголовком на безкоштовний сайт Weebly.
  • Повзунок Nivo пропонується з 4 різними стилями тем – світлим, смуговим, темним та типовим.
  • Ви можете додати 12 різних ефектів переходу – зрізати вниз праворуч, ковзати вниз ліворуч, нарізати праворуч, нарізати ліворуч, нарізати вгору, нарізати вгору вниз ліворуч, скласти, зникнути, випадкове поле, дощову коробку, зворотну коробку дощу та вирости зворотний.
  • До кожного окремого слайда можна додати різний ефект переходу.
  • Легко додати текстовий підпис та підпис із посиланням. Ви також можете зв’язати зображення повзунка з необхідною сторінкою на своєму сайті.
  • Використовуйте прості елементи керування, такі як кнопки навігації для попереднього та наступного слайдів.

Як додати віджет Nivo Slider на сайт Weebly?

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

Крок 1 – Підготовка зображень

Першим кроком для будь -якого слайд -шоу є підготовка зображень. У демонстраційних версіях ми використовували 4 зображення розміром 618 x 246 px. Ми рекомендуємо використовувати подібне співвідношення з зображеннями більшого розміру для кращої якості.

Крок 2 – Завантажте слайдерні файли

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

Завантажте всі файли повзунка рівня.

Архів zip містить 12 файлів, як показано нижче:

Навігаційні зображення

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

Сценарії:

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

Таблиця стилів:

  • theme-styles.css

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

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

Ви можете видалити демонстраційні зображення та використовувати власні на своєму веб -сайті Weebly.

Крок 3 – Завантажте слайдерні файли

Увійдіть у свій обліковий запис Weebly і відредагуйте сайт, на якому потрібно додати повзунок Nivo. Перейдіть до "Тема> Редагувати HTML /CSS" і перейдіть до розділу "Активи". Натисніть кнопку +, а потім створіть нову папку.

Безкоштовний віджет Nivo Slider для Weebly

Створення нової папки в редакторі коду Weebly

У цьому прикладі ми створюємо папку з назвою “nivo" і завантажуємо всі 12 файлів, завантажених на кроці 2.

Безкоштовний віджет Nivo Slider для 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 -адреси зображень на власні.

Налаштування повзунка рівня

Ефект переходу для зображень

Ефект переходу контролюється за допомогою параметра "перехід даних" для кожного зображення. Випадкові ефекти будуть використані, коли ви видалите параметр "перехід даних" з коду 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
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Використання різних тем

Тема для повзунка визначається за допомогою класу 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 – приховати ескізи навігації замість маркерів (вірно для показу)
  • pauseOnHover: true – Призупинити показ слайдів, коли миша наводиться на зображення
  • manualAdvance: false – За замовчуванням увімкнено автоматичне обертання, ви можете ввімкнути ручне переміщення зображень
  • prevText: ‘Попередня’ – текст попереднього зображення
  • nextText: ‘Next’ – текст наступного зображення
  • randomStart: false – Випадковий запуск вимкнено

Примітка: Будь ласка, не видаляйте коментарі щодо авторських прав із файлу “jquery.nivo.slider.nod.js”. Ми розуміємо, що початковий розробник “Dev7Studios” більше не існує, і сайт перенаправляється на плагін WordPress. Але залиште повідомлення недоторканим для довідки. Оскільки функція $ більше не підтримується у Weebly, ми замінили всі $ у сценарії на jQuery.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі