November 27, 2021
Топ слайдер
Страничка слайдера на гитхабе (смотреть дополнительные функции):
https://github.com/ganlanyuan/tiny-slider
Страничка-демонстрация функций слайдера:
http://ganlanyuan.github.io/tiny-slider/demo/
Йоксель, сервис для вставки векторных картинок ссылкой:
https://yoksel.github.io/url-encoder/ru/
Видеоинструкция: https://youtu.be/P6vhGL3EnXc
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<div class="wrapper">
<div class="my-slider">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
</div>
<div class="my-slider-2">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
<img src="https://cc26299.tmweb.ru/files/photo_2021-10-21_16-59-10.jpg">
</div>
</div>
<style>
.tns-outer {
position: relative;
}
/* Точки навигации начало */
.tns-nav {
position: absolute;
bottom: -50px;
left: 50%;
transform: translate(-50%, 0px);
z-index: 5;
display: flex;
width: 40%;
justify-content: space-between;
}
.tns-nav button {
height: 10px !important;
width: 10px !important;
border: 2px solid #FFFFFF;
border-radius: 16px;
box-sizing: border-box !important;
background: transparent;
max-width: 10px;
min-width: 10px;
flex-basis: 10px;
transition: all linear 0.1s;
padding: 0px 3px;
}
/* Точки навигации конец */
/* Активная точка навигации начало */
.tns-nav-active {
border: 0px solid #FFFFFF !important;
background: #0FCE67 !important;
box-sizing: border-box !important;
}
/* Активная точка навигации конец */
/* Общие правила стрелочек начало */
.tns-controls {
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
width: calc(100% + 80px);
margin: auto;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
align-items: center;
}
/* Общие правила стрелочек конец */
/* Тень при наведении на стрелочки начало */
.tns-controls button:hover {
filter: drop-shadow(0px 0px 20px #0FCE67);
}
/* Тень при наведении на стрелочки конец */
/* Кнопка назад начало */
button[data-controls="prev"] {
width: 20px;
height: 20px;
border: none;
background: transparent;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Кнопка назад конец */
/* Стрелка вперед начало */
button[data-controls="next"] {
width: 20px;
height: 20px;
border: none;
background: transparent;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед конец */
/* Стрелка назад картинка неактивная начало */
button[data-controls="prev"]::before {
background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_i_10_291)'%3E%3Cpath d='M11.5663 0L0 11.5663V69.3976L11.5663 80.9639H68.4337L80 69.3976V11.5663L68.4337 0H11.5663Z' fill='%2322BDCA' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M49 17L26 39.5577L49 63' stroke='white' stroke-width='6'/%3E%3Cdefs%3E%3Cfilter id='filter0_i_10_291' x='0' y='0' width='80' height='80.9639' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.135243 0 0 0 0 0.739633 0 0 0 0 0.791667 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_10_291'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 20px;
height: 100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
opacity: 1;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед картинка неактивная начало */
button[data-controls="next"]::before {
background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_i_10_292)'%3E%3Cpath d='M68.4337 80.9639L80 69.3976L80 11.5663L68.4337 1.62699e-05L11.5663 2.12415e-05L-6.06693e-06 11.5663L-1.01116e-06 69.3976L11.5663 80.9639L68.4337 80.9639Z' fill='%230FCE67' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M31 63.9639L54 41.4062L31 17.9639' stroke='white' stroke-width='6'/%3E%3Cdefs%3E%3Cfilter id='filter0_i_10_292' x='0' y='1.52588e-05' width='80' height='80.9639' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.133333 0 0 0 0 0.741176 0 0 0 0 0.792157 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_10_292'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 20px;
height: 100%;
z-index: 10;
position: absolute;
right: 0px;
top: 0px;
opacity: 1;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед картинка неактивная конец */
/* Стрелка назад картинка активная начало */
button[data-controls="prev"]::after {
background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5663 0L0 11.5663V69.3976L11.5663 80.9639H68.4337L80 69.3976V11.5663L68.4337 0H11.5663Z' fill='%230FCE67'/%3E%3Cpath d='M49 17L26 39.5577L49 63' stroke='white' stroke-width='6'/%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 20px;
height: 100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
transition: all linear 0.2s;
opacity: 0;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка назад картинка активная конец */
/* Смена состояний стрелок начало */
button[data-controls="prev"]:hover::before {
opacity: 0;
}
button[data-controls="prev"]:hover::after {
opacity: 1;
}
button[data-controls="next"]:hover::before {
opacity: 0;
}
button[data-controls="next"]:hover::after {
opacity: 1;
}
/* Смена состояний стрелок конец */
/* Кнопка вперед активная начало */
button[data-controls="next"]::after {
background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_i_10_292)'%3E%3Cpath d='M68.4337 80.9639L80 69.3976L80 11.5663L68.4337 1.62699e-05L11.5663 2.12415e-05L-6.06693e-06 11.5663L-1.01116e-06 69.3976L11.5663 80.9639L68.4337 80.9639Z' fill='%230FCE67'/%3E%3C/g%3E%3Cpath d='M31 63.9639L54 41.4062L31 17.9639' stroke='white' stroke-width='6'/%3E%3Cdefs%3E%3Cfilter id='filter0_i_10_292' x='0' y='1.52588e-05' width='80' height='80.9639' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.0588235 0 0 0 0 0.807843 0 0 0 0 0.403922 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_10_292'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 20px;
height: 100%;
z-index: 10;
position: absolute;
right: 0px;
top: 0px;
transition: all linear 0.2s;
opacity: 0;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Кнопка вперед активная конец */
</style>
<script>
var slider = tns({
container: '.my-slider',
controlsText: [" ", " "],
items: 1,
responsive: {
640: {
edgePadding: 0,
gutter: 0,
items: 1
},
700: {
gutter: 0
},
900: {
items: 1
}
}
});
</script>
<script>
var slider = tns({
container: '.my-slider-2',
controlsText: [" ", " "],
items: 1,
responsive: {
640: {
edgePadding: 0,
gutter: 0,
items: 1
},
700: {
gutter: 2
},
900: {
items: 3
}
}
});
</script>Слайдер с кастомным контентом:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<div class="wrapper"><div class="my-slider">
<div><article>
<img src="https://lipsum.app/id/1/1200x600" alt="">
<div>
<h3>Заголовок 1</h3>
<p>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
</div>
<div><article>
<img src="https://lipsum.app/id/1/1200x600" alt="">
<div>
<h3>Заголовок 2</h3>
<p>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article></div>
<div>
<a class="btn" href="https://google.com">Кнопка</a>
</div>
</div></div>
<style>
.tns-outer {
position: relative;
}
/* Точки навигации начало */
.tns-nav {
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%, 0px);
z-index: 5;
display: flex;
width: 50%;
justify-content: space-between;
}
.tns-nav button {
height: 10px !important;
width: 10px !important;
border: 2px solid #FFFFFF;
box-sizing: border-box !important;
background: transparent;
max-width: 10px;
min-width: 10px;
flex-basis: 10px;
transition: all linear 0.1s;
padding: 0px 3px;
}
/* Точки навигации конец */
/* Активная точка навигации начало */
.tns-nav-active {
border: 0px solid #FFFFFF !important;
width: 39.33px !important;
background: #0FCE67 !important;
box-sizing: border-box !important;
}
/* Активная точка навигации конец */
/* Общие правила стрелочек начало */
.tns-controls {
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
width: calc(100% + 80px);
margin: auto;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
align-items: center;
pointer-events: none;
}
.tns-controls button {
pointer-events: all;
}
/* Общие правила стрелочек конец */
/* Тень при наведении на стрелочки начало */
.tns-controls button:hover {
filter: drop-shadow(0px 0px 20px white);
}
/* Тень при наведении на стрелочки конец */
/* Кнопка вперед начало */
button[data-controls="prev"] {
width: 80px;
height: 80px;
border: none;
background: transparent;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед начало */
button[data-controls="next"] {
width: 80px;
height: 80px;
border: none;
background: transparent;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед конец */
/* Стрелка назад картинка неактивная начало */
button[data-controls="prev"]::before {
background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65' cy='65' r='65' transform='rotate(180 65 65)' fill='%23FF0000'/%3E%3Cpath d='M30.5251 62.5251C29.1583 63.892 29.1583 66.108 30.5251 67.4749L52.799 89.7487C54.1658 91.1156 56.3819 91.1156 57.7487 89.7487C59.1156 88.3819 59.1156 86.1658 57.7487 84.799L37.9497 65L57.7487 45.201C59.1156 43.8342 59.1156 41.6181 57.7487 40.2513C56.3819 38.8844 54.1658 38.8844 52.799 40.2513L30.5251 62.5251ZM97 61.5L33 61.5L33 68.5L97 68.5L97 61.5Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 80px;
height: 100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
opacity: 1;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед картинка неактивная начало */
button[data-controls="next"]::before {
background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65' cy='65' r='65' fill='%23FF0000'/%3E%3Cpath d='M99.4749 67.4749C100.842 66.108 100.842 63.892 99.4749 62.5251L77.201 40.2513C75.8342 38.8844 73.6181 38.8844 72.2513 40.2513C70.8844 41.6181 70.8844 43.8342 72.2513 45.201L92.0503 65L72.2513 84.799C70.8844 86.1658 70.8844 88.3819 72.2513 89.7487C73.6181 91.1156 75.8342 91.1156 77.201 89.7487L99.4749 67.4749ZM33 68.5H97V61.5H33V68.5Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 80px;
height: 100%;
z-index: 10;
position: absolute;
right: 0px;
top: 0px;
opacity: 1;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка вперед картинка неактивная конец */
/* Стрелка назад картинка активная начало */
button[data-controls="prev"]::after {
background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65' cy='65' r='65' transform='rotate(180 65 65)' fill='black'/%3E%3Cpath d='M30.5251 62.5251C29.1583 63.892 29.1583 66.108 30.5251 67.4749L52.799 89.7487C54.1658 91.1156 56.3819 91.1156 57.7487 89.7487C59.1156 88.3819 59.1156 86.1658 57.7487 84.799L37.9497 65L57.7487 45.201C59.1156 43.8342 59.1156 41.6181 57.7487 40.2513C56.3819 38.8844 54.1658 38.8844 52.799 40.2513L30.5251 62.5251ZM97 61.5L33 61.5L33 68.5L97 68.5L97 61.5Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 80px;
height: 100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
transition: all linear 0.2s;
opacity: 0;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Стрелка назад картинка активная конец */
/* Смена состояний стрелок начало */
button[data-controls="prev"]:hover::before {
opacity: 0;
}
button[data-controls="prev"]:hover::after {
opacity: 1;
}
button[data-controls="next"]:hover::before {
opacity: 0;
}
button[data-controls="next"]:hover::after {
opacity: 1;
}
/* Смена состояний стрелок конец */
/* Кнопка вперед активная начало */
button[data-controls="next"]::after {
background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65' cy='65' r='65' fill='black'/%3E%3Cpath d='M99.4749 67.4749C100.842 66.108 100.842 63.892 99.4749 62.5251L77.201 40.2513C75.8342 38.8844 73.6181 38.8844 72.2513 40.2513C70.8844 41.6181 70.8844 43.8342 72.2513 45.201L92.0503 65L72.2513 84.799C70.8844 86.1658 70.8844 88.3819 72.2513 89.7487C73.6181 91.1156 75.8342 91.1156 77.201 89.7487L99.4749 67.4749ZM33 68.5H97V61.5H33V68.5Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: cover;
content: '';
width: 80px;
height: 100%;
z-index: 10;
position: absolute;
right: 0px;
top: 0px;
transition: all linear 0.2s;
opacity: 0;
box-sizing: border-box;
border: 0px solid transparent !important;
}
/* Кнопка вперед активная конец */
article {
background: #fff;
color: #474747;
border-radius: 13px;
position: relative;
z-index: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
article > div {
padding: 1.5rem;
}
img {
border-radius: 12px;
}
.btn{
border: 2px solid black;
padding: 30px 60px;
color: black;
cursor: pointer;
position: relative;
overflow: hidden !important;
font-size: 24px;
font-family: sans-serif;
transition: all .5s;
}
.btn:before{
width: 100%;
height: 100%;
content: '';
margin: auto;
position: absolute;
top: -300%;
left: -300%;
background: #212121;
transition: all .5s;
z-index: -1;
}
.tns-item {
text-align: center;
vertical-align: baseline !important;
}
.btn:hover{
color: white;
}
.btn:hover:before{
top: 0;
left: 0;
}
</style>
<script>
var slider = tns({
container: '.my-slider',
controlsText: [" ", " "],
items: 1,
responsive: {
640: {
edgePadding: 0,
gutter: 0,
items: 1
},
700: {
gutter: 0
},
900: {
items: 1
}
}
});
</script>