Show code
<div class="calendar-slider" style="width: 500px; margin: auto">
<div class="flex hide-scrollbar day-pagination">
<div>
<div class="calendar calendar--selected">
<div class="calendar__number">23</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Monday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">1</span>
<span class="calendar__kids-number__kids">child</span>
</div>
</div>
</div>
<div>
<div class="calendar">
<div class="calendar__number">24</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Tuesday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">1</span>
<span class="calendar__kids-number__kids">child</span>
</div>
</div>
</div>
<div>
<div class="calendar">
<div class="calendar__number">25</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Wednesday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">0</span>
<span class="calendar__kids-number__kids">children</span>
</div>
</div>
</div>
<div>
<div class="calendar">
<div class="calendar__number">26</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Thursday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">1</span>
<span class="calendar__kids-number__kids">child</span>
</div>
</div>
</div>
<div>
<div class="calendar ">
<div class="calendar__number">27</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Friday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">0</span>
<span class="calendar__kids-number__kids">children</span>
</div>
</div>
</div>
<div>
<div class="calendar ">
<div class="calendar__number">28</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Saturday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">0</span>
<span class="calendar__kids-number__kids">children</span>
</div>
</div>
</div>
<div>
<div class="calendar ">
<div class="calendar__number">29</div>
<div class="calendar__date">09/2024</div>
<div class="calendar__day">Sunday</div>
<div class="calendar__kids-number calendar__kids-number--future">
<span class="calendar__kids-number__number">0</span>
<span class="calendar__kids-number__kids">children</span>
</div>
</div>
</div>
</div>
<div class="calendar-slider__arrow">
<button class="" onclick="event.target.closest('.calendar-slider').getElementsByClassName('day-pagination')[0].scrollLeft -= 106">
<span class="icon-arrow -previous icon--size-3 icon-on-bg"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span>
</button>
<button class="" onclick="event.target.closest('.calendar-slider').getElementsByClassName('day-pagination')[0].scrollLeft += 106">
<span class="icon-arrow -next icon--size-3 icon-on-bg"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span>
</button>
</div>
</div>
