Problém s carousel sliderom

Zdravím, mám problém s carousel sliderom na webstránke. Carousel sa zobrazí najprv v poriadku ale po prekliknutí sa do druhého okna sa neaktivuje (posielam obrázky) vedel by mi prosím s tým niekto poradiť? Som amatér, robil som to 1x, budem rád za akúkoľvek radu. Ďakujem

Slider - https://imgur.com/a/kgysgrP
Kod - https://jsfiddle.net/c2seab1n/

Otvor web, stlac f12 (chrome,ff a asi aj edge), otvor si console, zacni preklikavat a je mozne ze ti tam skoci daka chyba, ked tak nam ju sem skopci alebo vycitaj ze co to ma za problem.

Toto mi ukazuje console:

https://imgur.com/a/GmDGOqT

žiadna chyba v tom slideri podľa mňa.
Už nad tým rozmýšľam 2 týždňe a stále neviem prísť na chybu.

s jednym carouselom ti to ide? (v exampli tam mas 3)
Inak, ID na stranke je unikatne per dokument, cize to pouzivas zle.
Skus sem nahrat zdrojaky a mozno ti niekto alebo ja pomoze.

Áno, s jedným to ide v pohode.
Zdrojáky to je celý html kod a css?

Tak skus urobit 3 inicializacie carouselov s troma triedami a ID. Tak aby si mal validne HTML.

Ano zdrojaky znamena html, css, js, obrazky. Proste vsetko co treba na to, aby bezala tvoja stranka a videli sme problem.

Pridávam, zdrojáky:

https://www.plaveckykempbb.sk/Pokus.html

1.slider je vždy aktívny, no po preklikliku tabu sa ďaľší slider neaktivuje

poznas jQuery.onClick a jQuery.addClass .removeClass a tak? Mohlo by to riesit ten problem

ja som siel cez tento script, ale pravdepodobne mam v nom nieco zle.

<script>
$(document).ready(function() {

$(".owl-carousel").owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
$(".owl-carousel").trigger('refresh.owl.carousel');
});
});
</script>

Takto, ak tomu dobre rozumiem by to malo vyzerať:

<script src="js/jquery.js"></script>
<script>
$("# tabs-04".click(function() {
$("#Juniorky").addClass("second"){
}); ... atď. každú kategóriu napíšem, alebo idem na to úplne zle?
</script>

// Spojený príspevok 10.03.2021 14:00

Ale aj tak nerozumiem ako mi jQuery.onClick a jQuery.addClass .removeClass pomôže k aktivácií ostatných sliderov

// Spojený príspevok 10.03.2021 14:01

Resp. zobrazené sú ale nesprávne.

Tak som si doštudoval nejaké veci a najlepšie riešenie mi prišlo to riešiť cez javascript:

<script type="text/javascript">
var $tabs = document.querySelectorAll('.tabs-navigation a');
for (var i = 0; i < $tabs.length; i++) {
$tabs[i].addEventListener('click', function(){
$('.tab-pane#' + this.innerText + ' > div').owlCarousel();
});
}
</script>

len ani toto nefunguje

Stačilo do google napísať "owl carousel inside tab not working" a hneď zistíš že sa nemohol inicializovať nakoľko obsah tabov je skrytý.
https://stackoverflow.com/questions/28347479/owl-carousel-and-bootstrap-tab-on-a-page
a teda dám nejaké rady (ked už som bol na tom webe tak som sa aj preklikal na ine podstranky)
-skús si ten tvoj web otvoriť aj v iných prehliadačoch ako je chrome (Safari a IE niektorým príkazom nechápu alebo ich chápu inak) + samozrejme skús web pozrieť aj na mobile (chrome dokáže simulovať niektoré zariadenia)
-animácie.... je pekné že sa to tam hýbe bliká neviem čo... ale aby som dve sekundy čakal než sa mi niečo zobrazí?
-nadpis obalený v DIV? pozri si na čo sa používajú H tagy... (toto je vec aj pre SEO)
-velkost obrázkov (keď pridáš na web 8 obrázkov s rozlíšením 1000x1000 no ty ich pouzijes len v rozlisení 200x200 tak si si pekne spomalil web)

a teraz veci ktoré ti prácu uľahčia + web bude rýchlejší (ak ta zaujíma tvorba webov tak si ich prečítaj a ak nie tak to nečítaj)
- nepíš css a ani JS priamo do HTML dokumentu(iba ak to je ozaj že nevyhnutné).
- pozri si čo je GULP (ním dosiahneš to že nebudeš musieť linkovať 3 JS/CSS súbory ale budeš mať len jeden JS/CSS a to minifikovaný [rýchlejší])
- pozri sa čo je SCSS/SASS
- pozri si nejaký kurz predtým ako sa do niečoho vrhneš... ušetríš si čas a nervy. Odporúčam learn2code od autora Yablko kurz webrebel. Poprípade si ho nájdi na YT kde najdes urcite aj nejake videa/kurzy