January 15, 2022
Слайдер "без всего"
Видео: https://youtu.be/w3q9C5ng97c
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<div class="my-slider">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20236.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20237.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20238.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20239.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20240.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20241.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20242.png">
</div>
<style>
button[data-action="stop"] {
display: none;
}
</style>
<script>
var slider = tns({
container: '.my-slider',
items: 1,
nav: false,
controls: false,
autoplay: true,
mouseDrag: true,
speed: 500,
autoplayTimeout: 5000,
});
</script>Галерея с затуханием и увеличением следующего слайда:
<div class="my-slider-2">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20236.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20237.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20238.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20239.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20240.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20241.png">
<img src="https://cc26299.tmweb.ru/files/slider/Group%20242.png">
</div>
<style>
button[data-action="stop"] {
display: none;
}
.tns-scaling {
transform-origin: center center;
animation: anim--scale 5s linear 1 forwards;
}
@keyframes anim--scale {
0% {transform: scale(1);}
100% {transform: scale(1.05);}
}
.tns-scaling-inv {
transform-origin: center center;
animation: anim--scale-inv 5s linear 1 forwards;
}
@keyframes anim--scale-inv {
0% {opacity: 1;
transform: scale(1.05);
}
100% {opacity: 0;
transform: scale(1.05);
}
}
.my-slider-2 {
overflow: hidden;
}
</style>
<script>
var slider = tns({
container: '.my-slider-2',
items: 1,
nav: false,
controls: false,
autoplay: true,
mouseDrag: true,
speed: 5000,
autoplayTimeout: 5000,
mode: "gallery",
animateIn: "tns-scaling",
animateOut: "tns-scaling-inv",
});
</script>Код-костыль, чтобы убрать отступ от краев:
<style>
.tns-outer {
margin: 0px -15px;
}
</style>