Cтрелки навигации к слайдеру TS104N Тильда

магазин кастомных решений для тильды

Здесь собраны самые уникальные решения для тильды, с помощью которых вы сможете расширить функционал своих сайтов

Получить доступ

Обучающие продукты

Бесплатные модификации

Магазин модификаций

Курс «Tilda Custom Base»

бесплатный

Курс «Tilda Custom Main»

базовый

Курс «Tilda Custom Pro»

для опытных

Курс «Стилизация личного кабинета»

новое

Курс «Tilda Custom Нейросети»

новое

Предзапись на курс по стилизации стандартных блоков на тильде

Вы можете забронировать за собой самую низкую стоимость обучения, которое стартует 27 октября

Забронировать место

30+ бесплатных модификаций для твоих проектов на тильде

Уникальные модификации, с помощью которых вы сделаете свои проекты ещё круче, продуманнее и функциональнее

Перейти

телеграм-канал для дизайнеров

Чтобы не пропустить выход новых уроков, бесплатных и платных модификаций и также анонсов обучения — подписывайся на мой телеграм-канал

Связаться со мной

Я на связи с 10:00 до 18:00 (мск) в будние дни

Заказать разработку сайта

Вы можете заказать у меня не только разработку сайта на тильде, но и также дизайн сложных продуктов в фигме

Сайт-портфолио

Заказать сайт

Тильда

нейросети

создавайте рабочий код с помощью AI

19 900 ₽

от ~3 300 ₽ / месяц

в рассрочку от банков

26 уроков

таблица с 180 промптами

4 решения с нуля

полезное расширение

чат потока

бонусы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Стилизация личного кабинета

Научись стилизовать личные кабинеты курсов без знания кода

23 900 ₽

от ~3 980 ₽ / месяц

в рассрочку от банков

4 модуля

18 уроков

14 конструкторов кода

чат потока

бонусы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Tilda Custom Main

тот самый курс по стилизации стандартных блоков на тильде, на котором уже обучилось 300+ человек

27 900 ₽

от ~4 650 ₽ / месяц

в рассрочку от банков

50 уроков

50+ домашних заданий

100+ тестов

чат потока

бонусы

мастер-классы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Tilda Custom PRO

Продвинутая кастомизация стандартных и zero-блоков. Всё, что я знаю о кастомизации Тильды, собрано здесь

23 900 ₽

от ~3 980 ₽ / месяц

в рассрочку от банков

43 урока

40+ домашних заданий

60+ тестов

чат потока

бонусы

мастер-классы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Главная
/
Модификации
/
Cтрелки навигации у слайдера TS104N

Смотрите обучающее видео на YouTube канале

Cтрелки навигации у слайдера TS104N

Смотреть

Daniel Visser

Projects manager in Pixels

The principal element of Suprematism in painting, as in architecture, is its liberation from all social or materialist tendencies. Through Suprematism, art comes into its pure and unpolluted form. I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long.

Synthia Smyth

Editor-in-chief at Pixels

We were just building stuff 'cause we thought it was cool. I do remember having these specific conversations with my friends where we thought, you know, someone is gonna build this. Someone is gonna build something that makes it so that people can stay connected with their friends and their family. The product helped us to develop new directions in or brand strategy, to attract new customers and buyers. We started 3 years ago and got the top in Business One rating system. A great honour! Let us be honest, we could try to get same result attracting third-party specialists, but we had best luck to be in a boat with Elestory team!

Код для модификации

Вариант 1

Вариант со стрелками в правом верхнем углу над слайдером

Смотреть код

Вариант 2

Вариант со стрелками по бокам слайдера

Смотреть код

Вариант 3

Вариант со стрелками в правом нижнем углу под слайдером

Смотреть код

   <!--https://dsgnmax.ru/arrow-nav-ts104n--> <style>
/*Вариант со стрелками в правом верхнем углу над слайдером*/

.t958__slider{
    margin-left:0 !important;
}

.t958__gallery >.t-container_100 {
    margin-top: 100px;
}

.t958__previous, .t958__next{
    width:60px !important;
    height:60px !important;
}

/*Скругление попапа с текстом*/
.t958__card_popup{
    border-radius:16px !important;
}

/*Стрелка в право - отступ от правой стороны*/
.t958__next{
    right:40px !important;
}

/*Стрелка в лево - отступ от правой стороны*/
.t958__previous {
    right: 120px !important;
}

.t958__gallery > .t958__previous{
    left:inherit !important;
}


/*Добавляем стрелки навигации для блока */
@media screen and (min-width:320px){
    .t958__previous:before {
        content: "";
        width: 60px;    /*Ширина иконки */
        height: 60px;   /*Высота иконки */
        position: absolute;
        /*Вставляем ссылку на стрелку влево */
        background-image: url(https://static.tildacdn.com/tild3466-3038-4438-b232-343039306635/arrow-left.svg);  
        background-size: cover;
        transition: all .2s ease-in-out;    /*Плавность анимации*/
    }
    
    .t958__next:before {
        content: "";
        width: 60px;    /*Ширина иконки */
        height: 60px;   /*Высота иконки */
        position: absolute;
        /*Вставляем ссылку на стрелку вправо */
        background-image: url(https://static.tildacdn.com/tild3031-3561-4064-a533-323033643532/arrow-right.svg);
        background-size: cover;
        transition: all .2s ease-in-out;    /*Плавность анимации*/
    }
}
@media screen and (min-width:1200px{
    .t958__next:hover:before{ /*Анимация иконки влево при наведении*/
        transition: all .2s ease-in-out;    /*Плавность анимации*/
        transform:translateX(10px);  /*Смещение иконки вправо*/
        opacity:0.7;    /*Прозрачность*/
    }
    
    .t958__previous:hover:before{ /*Анимация иконки влево при наведении*/
        transition: all .2s ease-in-out;    /*Плавность анимации*/
        transform:translateX(-10px);  /*Смещение иконки влево*/
        opacity:0.7;    /*Прозрачность*/
    }
}


/*Подгоняем размер шрифта на всех адаптивах у блока с отзывами*/

/*Размер шрифта на планшетах*/
@media screen and (max-width:960px){
    .t958__author-name{
        font-size: 24px !important;  
    }
    .t958__author-descr{
        font-size: 14px !important;  
    }
    .t958__review-text{
        font-size: 16px !important;  
    }
}


/*Размер шрифта на мобилках*/
    @media screen and (max-width:640px){
    .t958__author-name{ 
        font-size: 20px !important;    /*Размер заголовка */
    }
    .t958__author-descr{    
        font-size: 12px !important;     /*Размер описания*/
    }
    .t958__review-text{   
        font-size: 14px !important;     /*Размер текста*/ 
    }
}



</style>

   <!--https://dsgnmax.ru/arrow-nav-ts104n--> <style>
/*Вариант со стрелками по бокам слайдера*/

@media screen and (min-width:320px){
.t958__previous:before {
    content: "";
    width: 60px;    /*Ширина иконки */
    height: 60px;   /*Высота иконки */
    position: absolute;
        /*Вставляем ссылку на стрелку влево */
    background-image: url(https://static.tildacdn.com/tild3466-3038-4438-b232-343039306635/arrow-left.svg);  
    background-size: cover;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease-in-out;
    
}

.t958__previous:hover:before{ /*Анимация иконки влево при наведении*/
    transition: all .2s ease-in-out;    /*Плавность анимации*/
    transform:translateY(-40px);  /*Смещение иконки вверх(при значении -30px иконка остается на месте*/
    opacity:0.7;    /*Прозрачность*/
}



.t958__next:before {
    content: "";
    width: 60px;    /*Ширина иконки */
    height: 60px;   /*Высота иконки */
    position: absolute;
        /*Вставляем ссылку на стрелку вправо */
    background-image: url(https://static.tildacdn.com/tild3031-3561-4064-a533-323033643532/arrow-right.svg);
    background-size: cover;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease-in-out;
}

.t958__next:hover:before{ /*Анимация иконки вправо при наведении*/
    transition: all .2s ease-in-out;    /*Плавность анимации*/
    transform:translateY(-40px);  /*Смещение иконки вверх(при значении -30px иконка остается на месте*/
    opacity:0.7;    /*Прозрачность*/
}}

@media screen and (min-width:960px){
.t958__slider{
    margin-left:0 !important;
}}




/*Подгоняем размер шрифта на всех адаптивах у блока с отзывами*/


/*Размер шрифта на мобилках от 480 px до 960px*/
    @media screen and (max-width:1200px){
    .t958__author-name{
    font-size: 24px;  
    }
    .t958__author-descr{
    font-size: 14px !important;  
    }
      .t958__review-text{
        font-size: 16px !important;  
    }}

/*Размер шрифта на мобилках от 0 px до 640px*/
    @media screen and (max-width:640px){
    .t958__author-name{ 
    font-size: 20px;    /*Размер заголовка */
    }
    .t958__author-descr{    
    font-size: 12px !important;     /*Размер описания*/
    }
      .t958__review-text{   
        font-size: 14px !important;     /*Размер текста*/ 
    }}
</style>

   <!--https://dsgnmax.ru/arrow-nav-ts104n--> <style>
/*Вариант со стрелками в правом нижнем углу под слайдером*/

.t958__slider{
    margin-left:0 !important;
}

.t958__gallery >.t-container_100 {
    margin-bottom: 100px;   /*Дополнительный отступ снизу у всего блока*/
}

.t958__control{
    top: initial !important;
    bottom: 0px !important;
}

.t958__previous, .t958__next{
    width:60px !important;
    height:60px !important;
}

/*Скругление попапа с текстом*/
.t958__card_popup{
    border-radius:16px !important;
}

/*Стрелка в право - отступ от правой стороны*/
.t958__next{
    right:40px !important;
}

/*Стрелка в лево - отступ от правой стороны*/
.t958__previous {
    right: 120px !important;
}

.t958__gallery > .t958__previous{
    left:inherit !important;
}


/*Добавляем стрелки навигации для блока */
@media screen and (min-width:320px){
    .t958__previous:before {
        content: "";
        width: 60px;    /*Ширина иконки */
        height: 60px;   /*Высота иконки */
        position: absolute;
        /*Вставляем ссылку на стрелку влево */
        background-image: url(https://static.tildacdn.com/tild3466-3038-4438-b232-343039306635/arrow-left.svg);  
        background-size: cover;
        transition: all .2s ease-in-out;    /*Плавность анимации*/
    }
    
    .t958__next:before {
        content: "";
        width: 60px;    /*Ширина иконки */
        height: 60px;   /*Высота иконки */
        position: absolute;
        /*Вставляем ссылку на стрелку вправо */
        background-image: url(https://static.tildacdn.com/tild3031-3561-4064-a533-323033643532/arrow-right.svg);
        background-size: cover;
        transition: all .2s ease-in-out;    /*Плавность анимации*/
    }
}
@media screen and (min-width:1200px{
    .t958__next:hover:before{ /*Анимация иконки влево при наведении*/
        transition: all .2s ease-in-out;    /*Плавность анимации*/
        transform:translateX(10px);  /*Смещение иконки вправо*/
        opacity:0.7;    /*Прозрачность*/
    }
    
    .t958__previous:hover:before{ /*Анимация иконки влево при наведении*/
        transition: all .2s ease-in-out;    /*Плавность анимации*/
        transform:translateX(-10px);  /*Смещение иконки влево*/
        opacity:0.7;    /*Прозрачность*/
    }
}


/*Подгоняем размер шрифта на всех адаптивах у блока с отзывами*/

/*Размер шрифта на планшетах*/
@media screen and (max-width:960px){
    .t958__author-name{
        font-size: 24px !important;  
    }
    .t958__author-descr{
        font-size: 14px !important;  
    }
    .t958__review-text{
        font-size: 16px !important;  
    }
}


/*Размер шрифта на мобилках*/
    @media screen and (max-width:640px){
    .t958__author-name{ 
        font-size: 20px !important;    /*Размер заголовка */
    }
    .t958__author-descr{    
        font-size: 12px !important;     /*Размер описания*/
    }
    .t958__review-text{   
        font-size: 14px !important;     /*Размер текста*/ 
    }
}



</style>