Promošky slider se dvěma řádky

by Petr Haluza

HTML

<div id="c"></div>
<div id="d"></div>
<div id="PromoObal">


<div id="PromoList">
<article class="project-box mix mixall mix_all" style="display:none;">
<figure class="image">
<a href="https://www.asm.cz/cs/kategorie/146100-kamerove-systemy#filter=on&amp;priceFrom=2&amp;priceTo=343400&amp;page=1&amp;form[2687][]=DAHUA%20TECHNOLOGY&amp;st_head_fixed=1&amp;st_sb_fixed=1" target="_blank">
<img src="https://img4.cz/redaction/banner/200309160609_610x350_asm-banner-610x350-dahua-sodexo.jpg" alt="">
</a>
</figure>
</article><article class="project-box mix mixall mix_all" style="display:none;">
<figure class="image">
<a href="https://www.facebook.com/100-MEGA-Distribution-107989947444172/?modal=admin_todo_tour" target="_blank">
<img src="https://img4.cz/redaction/banner/200309101728_610x350_100mega-850x500-facebook.jpg" alt="">
</a>
</figure>
</article><article class="project-box mix mixall mix_all" style="display:none;">
<figure class="image">
<a href="https://www.asm.cz/cs/search/list?search=%40NETXTE6187+NETXTE2065+NETXTE7122" target="_blank">
<img src="https://img4.cz/redaction/banner/200304090135_610x350_100mega-iptv-banner-610x350.jpg" alt="">
</a>
</figure>
</article><article class="project-box mix mixall mix_all" style="display:none;">
<figure class="image">
<a href="https://skoleni.i4wifi.cz/" target="_blank">
<img src="https://img4.cz/redaction/banner/200220100744_610x350_i4wifi-banner-610x350-odpovedi.jpg" alt="">
</a>
</figure>
</article><article class="project-box mix mixall mix_all" style="display:none;">
<figure class="image">
<a href="https://www.i4wifi.cz/cs/kategorie/156654-z-wave" target="_blank">
<img src="https://img4.cz/redaction/banner/200217141437_610x350_i4wifi-banner-610x350-chytra-domacnost-akce.jpg" alt="">
</a>
</figure>
</article><article class="project-box mix mixall mix_all">
<figure class="image">
<a href="https://www.i4wifi.cz/cs/231129-router-ubnt-unifi-dream-machine-pro" target="_blank">
<img...

CSS

#PromoList {height:420px;}
#PromoList article { width:350px; display: inline-block;}
#PromoList article figure { margin:0;}
#PromoList article img { width:100%;}
#PromoObal { overflow-x:scroll}

JavaScript

// 1.varia ta
//var c = document.getElementById("PromoList").childElementCount;
//var d = c * 175;
//$('#PromoList').css("width", d + 'px' );

// 2.varianta
divs = document.querySelectorAll('#PromoList > article');
//convert to an array
var divsArray = [].slice.call(divs);
//so now we can use filter - find all divs that are not display none
var displayShow = divsArray.filter(function(el) {
    return getComputedStyle(el).display !== "none"
});
//and use length to count
var numberOfVisibleDivs = displayShow.length;
//alert("hidden:"+numberOfHiddenDivs+", visible:"+numberOfVisibleDivs);
var d = numberOfVisibleDivs * 175 + 175;
$('#PromoList').css("width", d + 'px' );