siema slider in a jquery tab unable to slideimage after i resize browser

[Eugene_15]

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(&lt;?php echo $data4['totalviews']; ?&gt;, &lt;?php echo $data5['totaladv']; ?&gt;, &lt;?php echo $data6['totallike']; ?&gt;, 'favouritefireadv')">favourite</a>
                    </li>
                    <li>
                        <a class="element" href="#advertisement" onclick="advertisement(&lt;?php echo $data7['totalviews']; ?&gt;, &lt;?php echo $data8['totaladv']; ?&gt;, &lt;?php echo $data9['totallike']; ?&gt;, '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

  })
}

[rproffitt]

The pen doesn't seem to show the issue. But did make me write this reply over your text and box colors. The text in the boxes was unreadable.
Nod to https://www.htmlvalidator.com/htmlval/fontsandcolors.html

[Dani]

I'm able to reproduce this in the Codepen with the latest version of Chrome / macOS.

rproffitt, what are you referring to? The color scheme in the pen is just the default demo from Siema.

Eugene, does it work fine when not within a jQuery tab?

I'm thinking that the problem is that you hide all profile_content at first, and so Siema isn't given an opportunity to render properly.

[Dani]

I was in Opera when I looked and default colors are not a good excuse for the horrible color choices.

I think you're misunderstanding. The OP is just trying to get the demo to work. It isn't representative of their actual use case.

[Biiim]

Not familiar with Siema, I did get the bug you have on your codepen though. When I commented out the first gallery-image on the first slider it started working for me. I also fixed the canonicalised PHP code in the javascript <?php and ?> whatever it is for, I just changed it to 3 random integars - I just mention it incase that was a reason it started working for me.

<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(5, 6, 7, 'favouritefireadv')">favourite</a>
                    </li>
                    <li>
                        <a class="element" href="#advertisement" onclick="advertisement(1, 2, 3, '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>

The slider works by having all of the "slides" inside the mobileslider div then using javascript it moves through them by changing which image is active, that should point you to your bug if you look in the console while the slider is open to see what the HTML says.

It seems odd to me that you have the Slider code repeated twice - 2 different sliders?

[Dani]

I also fixed the canonicalised PHP code in the javascript <?php and ?>

I have to figure out if this is a bug that escaped what you wrote instead of treating it as <?php and ?>