{{assignVar 'isConfigurable' categoriesConfig }}
<section   class="indexcarour productCarousel divsection"
    data-list-name="{{list}}"
    data-slick='{
        "centerMode": true,
        "dots": false,
        "infinite": true,
        "mobileFirst": true,
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "slide": ".js-product-slide",
        "prevArrow": "{{#if customArrowClass}}.{{customArrowClass}}{{/if}}.js-product-prev-arrow",
        "nextArrow": "{{#if customArrowClass}}.{{customArrowClass}}{{/if}}.js-product-next-arrow",
        "responsive": [
            {
                "breakpoint": 1024,
                "settings": {
                    "slidesToShow": 5,
                    "slidesToScroll": 1
                }
            },
            {
                "breakpoint": 767,
                "settings": {
                    "slidesToShow": 3,
                    "slidesToScroll": 1
                }
            },
            {
                "breakpoint": 420,
                "settings": {
                    "slidesToShow": 2,
                    "slidesToScroll": 1
                }
            },
            {
                "breakpoint": 319,
                "settings": {
                    "slidesToShow": 1,
                    "slidesToScroll": 1
                }
            }
        ]
    }'
    data-dots-labels='{
        "dotAriaLabel": "{{lang 'carousel.dotAriaLabel'}}",
        "activeDotAriaLabel": "{{lang 'carousel.activeDotAriaLabel'}}"
    }'>

    <button id="parebutton"  onclick="pare()" aria-label="{{lang 'carousel.arrowAriaLabel'}} {{lang 'categorielegth'}}" class="probutton {{#if customArrowClass}}{{customArrowClass}} {{/if}}js-product-prev-arrow slick-prev slick-arrow "></button>
    {{#each categories}}
    {{#contains    (getVar 'isConfigurable')  this.id}}
    <div class="productCarousel-slide js-product-slide"  productid="{{this.id}}" productname="{{this.name}}">
        {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1) product=../this}}
    </div>
    {{else}}
    {{/contains}}
    {{/each}}


    <!-- <div class="buttondiv" onmouseover="buttonbalck()"  onmouseout="buttonnone()"> -->
    <button id="nextbutton"  onclick="next()" aria-label="{{lang 'carousel.arrowAriaLabel'}} {{lang 'categorielegth'}}" class="probutton {{#if customArrowClass}}{{customArrowClass}} {{/if}}js-product-next-arrow slick-next slick-arrow "></button>
    <!-- </div> -->


</section>

<div class="namediv">
        <h5 id="productname" class="namespan"></h5>
        <p id="productid" class="productidclass"></p>
        <a id="carhref" class="learndiv listItem-button">LEARN MORE</a>
    </div>

<script>
    var imgindex=4;
function pare(){
    var  divarr=document.getElementsByClassName("slick-track")[1].children;
    for(var i=0;i<divarr.length;i++){
        var mg= divarr[i].children[0].children[0].children[0].children[0].children[0];
        mg.style.width="55%";
        mg.style.border="";
        mg.style.top="50%";
        mg.style.marginTop = "-36px";
    }
    var img= $($(".slick-center")[0]).prev()[0].children[0].children[0].children[0].children[0].children[0];
    img.style.width="90%";
    img.style.border="5px solid #fa943e";
    img.style.top="50%";
    img.style.marginTop = "-70px";
    document.getElementById("productname").innerHTML=$($(".slick-center")[0]).prev()[0].getAttribute("productname");
    for(var i=0;i<categoryarr.length;i++){
        if($($(".slick-center")[0]).prev()[0].getAttribute("productid")==categoryarr[i].entityId){
            document.getElementById("productid").innerHTML=categoryarr[i].description;
            $("#carhref").attr("href","/products?categorie="+categoryarr[i].name+"&grade=2");
        }
    }
}
function next(){
    var  divarr=document.getElementsByClassName("slick-track")[1].children;
    for(var i=0;i<divarr.length;i++){
        var mg= divarr[i].children[0].children[0].children[0].children[0].children[0];
        mg.style.width="55%";
        mg.style.border="";
        mg.style.top="50%";
        mg.style.marginTop = "-36px";
        // if(divarr[i].ariaHidden=="false"){
        //     imgindex=i;
        // }
    }
    var img= $($(".slick-center")[0]).next()[0].children[0].children[0].children[0].children[0].children[0];
    img.style.width="90%";
    img.style.border="5px solid #fa943e";
    img.style.top="50%";
    img.style.marginTop = "-70px";
    document.getElementById("productname").innerHTML=$($(".slick-center")[0]).next()[0].getAttribute("productname");
    for(var i=0;i<categoryarr.length;i++){
        if($($(".slick-center")[0]).next()[0].getAttribute("productid")==categoryarr[i].entityId){
            document.getElementById("productid").innerHTML=categoryarr[i].description;
            $("#carhref").attr("href","/products?categorie="+categoryarr[i].name+"&grade=2");
        }
    }
}

// function  buttonbalck(){
//     document.getElementsByClassName("buttondiv")[0].style.display="block";
//     document.getElementsByClassName("buttondiv")[1].style.display="block";
// }
// function  buttonnone(){
//     document.getElementsByClassName("buttondiv")[0].style.display="none";
//     document.getElementsByClassName("buttondiv")[1].style.display="none";
// }

</script>