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>