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

Як додати слайдер вмісту акордеона у Weebly?

1

Фреймворк Bootstrap містить багато елементів користувача, які також можна самостійно додати на ваш сайт Weebly, додавши фрагмент коду. Повзунок вмісту в стилі акордеона або спойлера є одним із елементів Bootstrap, який називається згортанням, допомагає додати більший вміст у обмежений простір. Хоча ми вже пояснювали гармошку CSS та Weebly App Center, стиль Bootstrap пропонує ще один спосіб додати слайдер вмісту акордеона на ваш сайт Weebly.

Повзунок вмісту акордеона для Weebly

Баян має такі особливості:

  • Мобільне адаптивне автоматичне вирівнювання відповідно до портів перегляду пристрою, переглянутого на.
  • Натискання на назву відкриває вміст у стилі push down, а відкриття вмісту – у стилі push up.
  • За замовчуванням перший слайд відкривається під час завантаження сторінки.
  • До свого акордеону можна додати стільки слайдів.
  • Будь -який елемент HTML можна додати як частину віджета.
  • Область вмісту можна розділити на 12 стовпців, використовуючи структуру сітки Bootstrap.

Як додати слайдер вмісту акордеона у Weebly?

Bootstrap Accordion для Weebly

Сценарій:

Додайте наведений нижче сценарій під розділом коду нижнього колонтитулу вашої сторінки:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Посилання на нижченаведений Bootstrap CSS у розділі коду заголовка вашої сторінки:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML:

У цьому прикладі ми використали три повзунки з такими деталями:

  1. Перший слайд з двома колонками. один із зображенням карти, а інший із блоком картки. Цей розділ створено за допомогою макета групи карт.
  2. Другий слайд має зворотну карту.
  3. Третій слайд з текстовим елементом всередині блоку картки.

Обов’язково замініть URL -адреси зображень та фіктивний текстовий вміст власними.

<div id="accordion" role="tablist" aria-multiselectable="true"> <!-- First Section --> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Section 1 with Card Image and Card Block </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div class="card-group" style="margin:20px;"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card Title</h4> <p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p> </div> </div> </div> </div> </div> <!-- Second Section --> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Section 2 with Inverse Card </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card card-inverse" style="background-color: #333; margin:20px;"> <div class="card-block"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> </div> </div> <!-- Third Section --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Section 3 with Text Inside Card Block </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> <!-- Add More Sections Here --> </div>

Три розділи повзунка виділені коментарями для розуміння мети, і ви можете додати більше розділів, додавши блок коду та відповідно змінивши атрибути id та href. Пам’ятайте, що Bootstrap – це платформа, яка може впливати на інші елементи Weebly. Можливо, вам доведеться налаштувати CSS відповідно до вашої теми Weebly.

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

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