<div class="wrap-controls">
  <div class="arrow-nav">
    <div class="prev">
        <!--Тут заменить SVG. Это левая стрелка-->
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" viewBox="0 0 13 22" fill="none">
            <path d="M12 1L2 11L12 21" stroke="black" stroke-width="2"/>
        </svg>
    </div>
  </div>
  <ul class="custom-controls">
  </ul>
  <div class="arrow-nav">
    <div class="next">
        <!--Тут заменить SVG. Это правая стрелка-->
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" viewBox="0 0 13 22" fill="none">
            <path d="M1 21L11 11L1 0.999999" stroke="black" stroke-width="2"/>
        </svg>
    </div>
  </div>
</div>

<!-- Code by Fedyaeva -->
<style>
:root {
    /*Цвет текста*/
    --text-color: #000000;
    /*Цвет активного пункта и при наведении*/
    --active-color: #0000FF;
    /*Увеличение кружка над датой*/
    --circle-scale: scale(1.4);
    /*Цвет кружков*/
    --circle-color: #dcdce0;
    /*Шрифт текста*/
    --font: 'Arial';
    /*Размер шрифта для дат*/
    --date-font: 20px;
    /*Жирность шрифта для дат*/
    --date-weight: normal;
    /*Радиус скругления изображений в слайдере*/
    --slider-radius: 30px;
}
.wrap-controls{display:flex;justify-content:center;align-items:flex-start;color:var(--text-color)}.custom-controls{list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;width:100%;padding:0 20px!important}.custom-controls li:hover .custom-controls__circle,.swiper-pagination-bullet-active .custom-controls__circle{color:var(--active-color)}.custom-controls li:hover .custom-controls__title,.swiper-pagination-bullet-active .custom-controls__title{color:var(--active-color)}.custom-controls .flex{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;height:auto}.swiper-pagination-bullet{opacity:1!important;background:0 0!important}.custom-controls .flex .custom-controls__circle{transform:var(--circle-scale)}.custom-controls__circle{display:block;font-family:var(--font);font-size:24px;line-height:.85;transition:all .3s ease;cursor:pointer}.custom-controls__title{font-family:var(--font);font-size:var(--date-font);font-weight:var(--date-weight);transition:all .3s ease;cursor:pointer}
/* Slider style */
.slider__container.swiper-container{position:absolute;display:block;margin:0!important;overflow:hidden!important;border-radius:var(--slider-radius)}.swiper-wrapper{display:flex!important}.swiper-slide{background-size:cover;background-position:center}.arrow-nav{cursor:pointer}
@media screen and (max-width: 640px) {
    .slider__container.swiper-container{border-radius:0}.swiper-none{display:none!important}.custom-controls{gap:10px;padding:0!important}.custom-controls .flex .custom-controls__circle{display:none}.arrow-nav{display:none}
}
@media screen and (min-width: 640px) {
    .custom-controls__circle {width: 10px;height: 10px;background-color: var(--circle-color);border-radius: 50%;}
    .custom-controls li:hover .custom-controls__circle, .swiper-pagination-bullet-active .custom-controls__circle {background-color: var(--active-color);}
}
</style>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
    // Ниже вставляются ссылки на изображения, их нужно залить на тильду
    let images = [
        'https://static.tildacdn.com/tild6439-3966-4238-b230-366265653638/photo_2022-03-14_20-.jpg', 
        'https://static.tildacdn.com/tild3930-3034-4537-a430-316263323835/photo_2022-03-15_20-.jpg',
        'https://static.tildacdn.com/tild3434-3961-4938-b864-313063306430/photo_2022-04-02_15-.jpg', 
        'https://static.tildacdn.com/tild3164-6264-4433-b630-653265303261/asdrubal-luna-A_hPa0.jpg',
        'https://static.tildacdn.com/tild6439-3966-4238-b230-366265653638/photo_2022-03-14_20-.jpg', 
        'https://static.tildacdn.com/tild3930-3034-4537-a430-316263323835/photo_2022-03-15_20-.jpg',
        'https://static.tildacdn.com/tild3434-3961-4938-b864-313063306430/photo_2022-04-02_15-.jpg', 
        'https://static.tildacdn.com/tild3164-6264-4433-b630-653265303261/asdrubal-luna-A_hPa0.jpg',
        'https://static.tildacdn.com/tild6439-3966-4238-b230-366265653638/photo_2022-03-14_20-.jpg', 
        'https://static.tildacdn.com/tild3930-3034-4537-a430-316263323835/photo_2022-03-15_20-.jpg',
        'https://static.tildacdn.com/tild3434-3961-4938-b864-313063306430/photo_2022-04-02_15-.jpg', 
        'https://static.tildacdn.com/tild3164-6264-4433-b630-653265303261/asdrubal-luna-A_hPa0.jpg',
        'https://static.tildacdn.com/tild6439-3966-4238-b230-366265653638/photo_2022-03-14_20-.jpg', 
        'https://static.tildacdn.com/tild3930-3034-4537-a430-316263323835/photo_2022-03-15_20-.jpg',
        'https://static.tildacdn.com/tild3434-3961-4938-b864-313063306430/photo_2022-04-02_15-.jpg', 
        'https://static.tildacdn.com/tild3164-6264-4433-b630-653265303261/asdrubal-luna-A_hPa0.jpg',
        'https://static.tildacdn.com/tild6439-3966-4238-b230-366265653638/photo_2022-03-14_20-.jpg', 
        'https://static.tildacdn.com/tild3930-3034-4537-a430-316263323835/photo_2022-03-15_20-.jpg',
        'https://static.tildacdn.com/tild3434-3961-4938-b864-313063306430/photo_2022-04-02_15-.jpg',
    ];
    // Тут указываются даты
    // Пустой пробел - просто кружочек
    let date = ['2012', '', '2013', '', '2014', '', '2015', '', '2016', '', '2017', '', '2018', '', '2019', '', '2020', '', '2021', '']
    
    document.addEventListener('DOMContentLoaded',(event)=>{document.querySelector('.slider__container').classList.add('swiper-container');let wrapper=document.querySelector('.slider__container .tn-atom');wrapper.classList.add('swiper-wrapper');for(let i=0;i<images.length;i+=1){let img=document.createElement('div');img.classList.add('swiper-slide');img.style.backgroundImage=`url(${images[i]})`;wrapper.appendChild(img)}var swiper2=new Swiper('.slider__container',{loop:true,slidesPerView:1,autoplay:{delay:3500,},effect:'fade',loop:true,navigation:{nextEl:'.next',prevEl:'.prev',},pagination:{el:".custom-controls",clickable:true,renderBullet:function(index,className){return'<li class="'+className+'"><span class="custom-controls__circle"></span><span class="custom-controls__title">'+(date[index])+'</span></li>'},}});let swiperBullet=document.querySelectorAll('.swiper-pagination-bullet');for(let j=0;j<=swiperBullet.length;j+=1){if(j%2==0){swiperBullet[j].classList.add('flex')}};if(window.matchMedia("(max-width: 640px)").matches){for(j=0;j<=swiperBullet.length;j+=1){if(j%2!==0){if(swiperBullet[j]){swiperBullet[j].querySelector('.custom-controls__circle').textContent='›'}}}}});
</script>

<!-- Code by Fedyaeva -->
<style>html{scroll-behavior:smooth;scroll-padding-top:2rem}</style><script>if(location.hash)history.replaceState({},document.title,location.href.split('#')[0]);document.addEventListener("DOMContentLoaded",()=>{function set(){let search=document.querySelector('#form493710076 input[name="search"]');let searchButton=document.querySelector('.search__button');let lastResFind="";function TrimStr(s){s=s.replace(/^\s+/g,'');return s.replace(/\s+$/g,'')}function FindOnPage(){var obj=document.querySelector('input[name="custom_search"]');var textToFind;if(obj){textToFind=TrimStr(obj.value)}else{alert("Введенная фраза не найдена");return}if(textToFind==""){alert("Вы ничего не ввели");return}document.body.innerHTML=document.body.innerHTML.replace(eval("/name="+lastResFind+"/i"),"");document.body.innerHTML=document.body.innerHTML.replace(eval("/"+textToFind+"/i"),"<a id="+textToFind+" style='background:red;color:#fff;'>"+textToFind+"</a>");lastResFind=textToFind;window.location='#'+textToFind}searchButton.addEventListener('click',()=>{FindOnPage()})}set()});window.onpopstate=function(event){function set(){let search=document.querySelector('#form493710076 input[name="search"]');let searchButton=document.querySelector('.search__button');let lastResFind="";function TrimStr(s){s=s.replace(/^\s+/g,'');return s.replace(/\s+$/g,'')}function FindOnPage(){var obj=document.querySelector('input[name="custom_search"]');var textToFind;if(obj){textToFind=TrimStr(obj.value)}else{alert("Введенная фраза не найдена");return}if(textToFind==""){alert("Вы ничего не ввели");return}document.body.innerHTML=document.body.innerHTML.replace(eval("/id="+lastResFind+"/i"),"");document.body.innerHTML=document.body.innerHTML.replace(eval("/"+textToFind+"/i"),"<a id="+textToFind+" style='background:red;color:#fff;'>"+textToFind+"</a>");lastResFind=textToFind;window.location='#'+textToFind}searchButton.addEventListener('click',()=>{FindOnPage()})}set()};window.addEventListener("load",()=>{document.querySelector('.tn-form__submit').remove()})</script>