В этом видео я вам показываю новую функцию, галерея в Zero блоке На Tilda.

Регистрируйтесь на лучшем конструкторе для создания сайтов Tilda: Регистрация здесь

Теперь есть своя галерея в Zero блоке на Tilda

В этом видео мы перенесём галерею в Zero блок и поставим свои элементы управления, стрелки, На Tilda.

Регистрируйтесь на лучшем конструкторе для создания сайтов Tilda: Регистрация здесь

Переносим галерею GL01 в Zero блоке на Tilda


<script>
//Перемещаем слайдер в ZeroBlock в div контейнер с классом sliderzero
$("#rec45716577").appendTo(".sliderzero");
//Добавляем класс к левой кнопке
$(".tn-elem__457165041519379999897").addClass("leftarrow zeroarrow");
//Добавляем класс к правой кнопке
$(".tn-elem__457165041519380020679").addClass("righarrow zeroarrow");
//При клике на левую кнопку - крутим слайдер влево
 $(".leftarrow").click(function() {
   $(".t670 .t-slds__arrow-left")[0].click();
  });
//При клике на правую кнопку - крутим слайдер вправо
  $(".righarrow").click(function() {
   $(".t670 .t-slds__arrow-right")[0].click();
  });
</script>

<style>
/*Скрываем штатные стреклки*/
.t-slds__arrow_container{
    display: none;
}
/*Добавляем свойство анимации для кнопок*/
 .zeroarrow{
  transition: all 400ms ease;
 } 
/*Эффект при наведении на стрелочки*/
.zeroarrow:hover {
    cursor:pointer;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
/*Изменяем ширину галереи на экранах меньше 540px*/
@media screen and (max-width: 540px){
.t-slds__container {
    max-width: 400px !important;
}}
/*Изменяем ширину галереи на экранах меньше 400px*/
@media screen and (max-width: 400px){
.t-slds__container {
    max-width: 320px !important;
}}
</style>
Всё делаем по этапно

1. Создаём ZeroBlock
2. Создаём в Zero элемент HTML, очищаем его и вставляем блок
<div class="sliderzero"></div>
2. Создаём галерею GL01
3. Настройки галереи
Ширина: 7 блоков
Высота: 400px
Отступы: 0px
4. Добавляем скрипт. Заменяем элементы:
#rec45716577 - ID Галереи
tn-elem__457165041519379999897 - класс левой кнопки / Ссылка левой кнопки #leftarrow
tn-elem__457165041519380020679 - класс правой кнопки / Ссылка правой кнопки #righarrow
There is no design without discipline.
The best ideas come as jokes. Make your thinking as funny as possible. The best ideas come as jokes. Make your thinking as funny as possible. The best ideas come as jokes. Make your thinking as funny as possible. The best ideas come as jokes. Make your thinking as funny as possible. The best ideas come as jokes. Make your thinking as funny as possible.
То что у нас получилось
Скрипты и инструкции взяты и используются с официального сайта mo-ti.ru
Пожертвование на развитие проекта
Другие полезные уроки и статьи
Оставить заявку:
Написать мне в:
Нажимая кнопку, вы принимаете Положение и Согласие на обработку персональных данных
Есть вопросы?
Напишите мне