So the best option would be to use regular CSS tabs. You just implement the slider right into the tabs.

Here is an example of css tabs: https://www.w3schools.com/w3css/w3css_tabulators.asp

Does anyone now how to implement a slider inside of tabs?

I have already implemented it in my own way, but it starts lagging. The first tab works fine, but the other ones show only one slide and don’t move before I resize the window.

Here is my implementation:

Solution

Here is how you would implement clickable tab buttons:

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">Slider 1 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Slider 2 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Slider 3 name</button>
</div>

Here is how you would put sliders inside of the tabs:

<div id="London" class="city">
  <p>Slider 1 info</p>
</div>

<div id="Paris" class="city" style="display:none">
  <p>Slider 2 info</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <p>Slider 3 info</p>
</div>