Hi guys, my siema slider plugin is not working in the jquery tab, everything i switch my tab, my image slider unable to slide image, only if I resize my browser and the slider image will function back again.
Below there is a demo codepen link, hope i can get some advise from u guys. thanks alot
https://codepen.io/Eugene7/pen/LYRmyZW
HTML
<main class="maingallery">
<div class="containergallery">
<nav class="top-nav">
<div class="topnavrow">
<ul class="navbar-left tabprofile">
<li>
<a class="element hahafav" href="#favourite" onclick="favourite(<?php echo $data4['totalviews']; ?>, <?php echo $data5['totaladv']; ?>, <?php echo $data6['totallike']; ?>, 'favouritefireadv')">favourite</a>
</li>
<li>
<a class="element" href="#advertisement" onclick="advertisement(<?php echo $data7['totalviews']; ?>, <?php echo $data8['totaladv']; ?>, <?php echo $data9['totallike']; ?>, 'advfireadv')">advertisement</a>
</li>
</ul>
</div>
</nav>
<div class="profile_content" id="favourite">
<div class="galleryupload" id="favouritephoto">
<div class="gallery-item">
<div class="mobileslider">
<div style="width:275px;">
<img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">
</div>
<div style="width:275px;">
<img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">
</div>
</div>
</div>
</div>
</div>
<div class="profile_content" id="advertisement">
<div class="galleryupload" id="galleryadv">
<div class="gallery-item" >
<div class="mobileslider">
<div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">
</div>
<div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</main>CSS
.maingallery {
border-style: none;
border-color: #fff;
border-width: 1px;
display: block;
margin: 10px 0px 0px 0px;
}
.containergallery {
border-style: none;
border-color: #FFF;
border-width: 1px;
display: block;
}
.galleryupload {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
grid-gap: 2rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
width:275px;
overflow:hidden;
}
.gallery-item:hover .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width:275px;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 12px;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone, .fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 350px;
object-fit:cover;
position:relative;
}
.visually-hidden {
font-size:16px;
}
.top-nav {
width: 855px;
height: 48px;
position: relative;
overflow: hidden;
font-family: 'Gibson', sans-serif;
font-size: 11px;
padding: 5px;
border-style: none;
border-color: #000;
border-width: 3px;
margin: 5px 0px 0px 0px;
}
.topnavrow {
float: left;
}
.top-nav ul li {
float: left;
padding: 10px 10px;
color: #FFF;
opacity: 0.6;
border-style: none;
border-color: #FFF;
border-width: 1px;
margin: 0px 6px 0px 0px;
background-color: #29282b;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px #000;
-moz-box-shadow: 0 0 2px 2px #000;
box-shadow: 0 0 2px 2px #000;
}
.top-nav ul li.active {
color:#0983b8;
border-color:#0983b8;
border-width:1px;
border-style:solid;
}
.top-nav ul li i {
font-size: 19px;
margin-right: 7px;
border-radius: 2px;
color: #fff;
}
.galleryupload {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
grid-gap: 2rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
width:275px;
overflow:hidden;
}
.gallery-item:hover .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width:275px;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 12px;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone, .fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 350px;
object-fit:cover;
position:relative;
} javascript
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
$(document).ready(function() {
//Default Action
$(".profile_content").hide(); //Hide all content
$("ul.tabprofile li:first").addClass("active").show(); //Activate first tab
$(".profile_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabprofile li").click(function() {
$("ul.tabprofile li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".profile_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
https://pawelgrzybek.github.io/siema/assets/siema.min.js
const siemas = document.querySelectorAll('.mobileslider');
// this is fairly new way of looping through DOM Elements
// More about ithere: https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements/
// For better compatibility I suggest using for loop
for(const siema of siemas) {
new Siema({
selector: siema
})
}