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

Weebly предлагает традиционный элемент слайд-шоу изображений для добавления слайдеров на ваш сайт. К сожалению, это далеко не так, как современные слайд-шоу, предлагаемые сторонними поставщиками или плагинами. Вы можете создавать красивые слайдеры в стиле аккордеона, сделанные исключительно с помощью CSS. В этой статье мы объясним, как создать слайдер изображения аккордеона и CSS на сайте Weebly.

Слайдер изображений Weebly Accordion

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

CSS Accordion Slider

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

Теперь, когда вы увидели слайдер и если он выглядит хорошо, вот пошаговая инструкция по добавлению слайдера на ваш сайт. Процесс состоит из трех простых шагов:

  • Загрузка изображений для слайдера
  • Добавление кода CSS на уровне страницы или сайта
  • Добавление HTML-кода с использованием элемента встроенного кода

Шаг 1 – Загрузка изображений для слайдера Accordion

Подготовьте все свои изображения нужного размера. В этом примере мы использовали изображения шириной 640 пикселей. Загрузите все изображения на свой сайт в разделе «Тема> Редактировать HTML / CSS> Ресурсы> Загрузить файл (ы)…».

Загрузить изображения в редакторе кода Weebly
Загрузить изображения в редакторе кода Weebly

Вы должны сохранить URL-адреса загруженных изображений, которые необходимо использовать на шаге 3. URL-адрес загруженного изображения будет иметь вид:

https://your-site-name.com/files/theme/image-name.jpg

Кроме того, вы можете щелкнуть изображение правой кнопкой мыши и получить URL-адрес, который должен выглядеть следующим образом:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png
Получить URL загруженного изображения
Получить URL загруженного изображения

После загрузки всех изображений нажмите кнопку «Сохранить» и укажите собственное имя для своей темы.

Шаг 2 – Добавление кода CSS

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

Добавить код заголовка на страницу
Добавить код заголовка на страницу

Если вы хотите добавить слайдер на несколько страниц, мы рекомендуем добавить его в основной CSS в разделе «Тема> Изменить HTML / CSS> Стиль> main.less». Вы также можете добавить код в разделе «Настройки> SEO> Код заголовка».

Добавить код заголовка на уровне сайта Weebly
Добавить код заголовка на уровне сайта Weebly
<style type="text/css">
.accordion_slider {
width: 805px; height: 320px;
overflow: hidden;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordion_slider ul {
width: 2000px;
}
.accordion_slider li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordion_slider ul:hover li {width: 40px;}
.accordion_slider ul li:hover {width: 640px;}
.accordion_slider li img {
display: block;
max-width: 640px !important;
}
.image_box {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0; 
width: 640px; 
}
.image_box a {
display: block;
color: #fff !important;
text-decoration: none;
text-align: left;
padding: 20px;
font-size: 16px;
}
</style>

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

Шаг 3 – Добавление HTML-кода

Последний шаг – добавить приведенный ниже HTML-код ползунка, перетащив элемент кода внедрения в область содержимого требуемой страницы. Не забудьте заменить ссылки на изображения своими собственными ссылками из шага 1.

<div class="accordion_slider">
<ul>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-1.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-2.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-3.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-4.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-5.jpg"/>
</li>
</ul>
</div>

Заметка: После добавления кода HTML вы можете увидеть, что изображения перечислены одно под другим в редакторе Weebly. Это нормально, потому что эффекты CSS не применяются на странице, опубликуйте страницу, чтобы увидеть фактический слайдер.

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

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

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