по стилизации стандартных блоков на тильде
последний поток курса
50 уроков
40+ домашек
прямые эфиры
мастер-классы
5 модулей
7 бонусов
личный кабинет
длительность
6 недель
старт курса
13 мая
новый модуль
ChatGPT
доступ
навсегда
Смотрите обучающее видео на 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.
Agatha Morris
Sales manager La Playa Store
Elestory is a big team of professionals and very responsible people. We started working with Elestory 3 years ago, and every year their business program becomes better. They maintain their best level.
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!
Agatha Morris
Sales manager La Playa Store
Elestory is a big team of professionals and very responsible people. We started working with Elestory 3 years ago, and every year their business program becomes better. They maintain their best level.
Вариант со стрелками в правом верхнем углу над слайдером


<!--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>

Made on
Tilda