Слайдер-афиша для Taplink

Пример: https://besttaplink.ru/p/bed609/

Видео:https://www.youtube.com/watch?v=y_AsJpq1ibo

Сборка:

1. Убедитесь, что у вас на странице есть html-код с таким текстом

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Если его нет, вставьте в самый верх таплинка

Создайте секции из любых блоков. В примере это заголовок, текстовый блок и текстовый блок, покрашенный с помощью https://t.me/taplinkbest/66 этого способа.

Добавьте секции фоновую картинку. Шаблоны для фона можете взять тут https://www.figma.com/file/hmvhY6tdELVaQf9lSZppUO/%D1%82%D0%B0%D0%BF%D0%BB%D0%B8%D0%BD%D0%BA-%D0%BA%D0%B0%D0%BD%D0%B0%D0%BB-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8?node-id=0%3A1&t=VemmHvqQmv7VI9cc-1

В каждую секцию добавьте по коду

<div class="oneway-slider wrap-me"></div>

Добавьте блок html с содержимым

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

Это ссылки на библиотеки слайдера

Добавьте блок html с содержимым

<style>
.oneway-slider-parent {
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.tns-outer {
position:relative;
}
.tns-outer * {
  outline:none!important;
  outline:0!important;
}
.tns-outer u {
  border: 1px solid #FFFFFF;
  border-radius: 24px;
  padding: 6px 14px;
  text-decoration:none;
  display: inline-block;
  margin: .2em .1em;
}
.oneway-slider-parent {
  padding-bottom:50px;
}

.tns-nav {
position: absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index: 10;
  display:flex;
  align-items:center;
  gap:10px;
}
.tns-nav button {
  padding: 0;
  width: 10px;
  height: 10px;
  background: #D9D9D9;
  border-radius:50%;
  border:none;
}
.tns-nav button.tns-nav-active {
  background: #00F0F0;
}
.tns-controls:not(.transparency) {
  position: absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index: 10;
}
.tns-controls {
  pointer-events:none;
}
.tns-controls button {
  pointer-events: all;
}
.tns-controls:not(.transparency)+ .tns-nav{
  bottom:50px;
}
.tns-controls:not(.transparency) button {
background:none;
  border:none;
}
.tns-controls.transparency {
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  justify-content:space-between;
  overflow:hidden;
  z-index:10;
}

.tns-controls.transparency button {
  background:none;
  border:none;
  width:50vw;
  margin: 0 25vw;
  aspect-ratio:1;
  z-index:10;
  border-radius:50%;
  transition:.1s;
}
.tns-controls.transparency button:hover {
  background:rgba(255,255,255,0.05);
}
  .tns-outer .page-container {
    max-width: 100%;
    width: 100%;
}
@media (min-width:640px) {
  .oneway-slider-parent {
    padding:4em;
  }
  .oneway-slider-section::before {
    width:calc(100% - 4em);
    margin:auto;
  }
}

</style>
<script>
let prevBTN = ``,
  nextBTN = ``;

$('.oneway-slider.wrap-me').closest('.blocks-section').addClass('oneway-slider-section');
  $('.oneway-slider.wrap-me').closest('.block-html').parent().addClass('oneway-slider-parent')
  $('.block-text u').parent().addClass('badges')
  $('.oneway-slider-section').wrapAll('<div class="oneway-gallery-slider"></div>')
  
var slider = tns({
    container: '.oneway-gallery-slider',
    controlsText: [" ", " "],
    items: 1,
    responsive: {
      640: {
        items: 2
      },
      820: {

        items: 3
      }
    }
  });

$('button[data-controls="prev"]').html(prevBTN)
  $('button[data-controls="next"]').html(nextBTN)
  if (!$('.tns-controls button').eq(0).html().length) {
$('.tns-controls').addClass('transparency')
}
</script>

Этот код накалякал я.

Приятного пользования