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

Главная
/
Модификации
/
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>