Duplicate events section

romeubessa10
New Member
1 0 0

I created a section with Icon Sliders. And I'm doing the Slider with Javascript, but when I put 2 sections on the same page it apparently hides one of the sections and only applies the slide event in the other section.

 

 

<div data-section-id="{{ section.id }}" class="tt-single-text-with-icons">
    {%- for block in section.blocks -%}{%- assign b_i = block.settings -%}
        <div class="tt-single-text-with-icons-item slide-{{ section.id }}">
            <i class="icon {{ b_i.icon }}" style="color: #F40F46"></i>
            <p style="color:#191919;">{{ b_i.title }}</p>
        </div>
    {%- endfor -%}
</div>

<script>
if (window.matchMedia("(max-width: 479px)").matches) {
    var slideIndex = 0;
    showSlides();
}

function showSlides() {
    var i;
    var slides = document.getElementsByClassName('slide-{{ section.id }}');

    console.log(slides);
    
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
    }

    slideIndex++;

    if (slideIndex > slides.length) {slideIndex = 1}    

    slides[slideIndex-1].style.display = "block";  

    setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>

<style>
.tt-single-text-with-icons {
    font-size: 19px;
    line-height: 19px;
    font-weight: 600;
    text-align: center !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
.tt-single-text-with-icons .tt-single-text-with-icons-item {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.tt-single-text-with-icons .tt-single-text-with-icons-item {
    display: inline-block;
    padding: 12px 11px 10px;
}
.tt-single-text-with-icons .tt-single-text-with-icons-item i {
    font-size: 39px !important;
    line-height: 39px !important;
    top: -3px !important;
    font-size: 28px;
    line-height: 28px;
    margin-right: 4px;
    color: #276B9D;
    top: -3px;
    position: relative;
    vertical-align: middle;
}
.tt-single-text-with-icons .tt-single-text-with-icons-item p {
    margin: 0;
    display: inline-block;
}
</style>


{% schema %}
{
  "name": "Icon Sliders",
  "class": "index-section",
  "blocks": [
    {
        "type": "item",
        "name": "Banner",
        "settings": [
            {
                "type": "text",
                "id": "icon",
                "label": "Wokiee icon",
                "default": "icon-f-48",
                "info": "[Wokiee Icons](\/\/portotheme.com\/shopify\/wokiee\/icons)"
            },
            {
                "type": "text",
                "id": "title",
                "label": "Title",
                "default": "FREE SHIPPING"
            }
        ]
    }
   ],
  "presets": [
        {
        "name": "Icon Sliders",
        "category": "Banner"
        }
    ]
}
{% endschema %}

 

0 Likes