Calculate a parent div's width by the amount of child divs-CodePudding

I am currently creating a horizontal image slider which will be used more than once with different amount of images. At the moment, the parent div needs to be bigger than 100% to fit all images in, so I calculate the width by adding all widths of the child divs (which include the images) manually in a calculator and then add it to the css, but I want to be able to calculate it automatically with the help of either CSS or JS/jQuery.

window.onload = function(){
    let images = [...document.querySelectorAll('.bild')];
    let slider = document.querySelector('.slider');
    let sliderWidth;
    let imageWidth;
    let current = 0;
    let target = 0;
    let ease = .05;

    window.addEventListener('resize', init);

    function lerp(start, end, t){
        return start * (1-t)   end * t;
    }
    function setTransform (el, transform){
        el.style.transform = transform;
    }
    function init(){
        sliderWidth = slider.getBoundingClientRect().width;
        imageWidth = sliderWidth / images.length;
        document.body.style.height = `${sliderWidth - (window.innerWidth - window.innerHeight)}px`
    }

    function animate(){
        current = parseFloat(lerp(current, target, ease)).toFixed(2);
        target = window.scrollY;
        setTransform(slider, `translateX(-${current}px)`);
        requestAnimationFrame(animate);
    }

    init();
    animate();
    console.log(sliderWidth)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 3900px; /* this should be calculated automatically by the amount of divs with the class "item" multiplied by the item width */
  height: 100%;
}
.slider-inner {
  position: absolute;
  top: 5%;
  height: 90%;
  display: flex;
  justify-content: space-around;
}
.item {
  position: relative;
  width: 455px;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background: #13271b;
}
.image {
  position: absolute;
  width: 435px;
  height: 100%;
  background-size: cover;
  background-position: top center;
  border: none;
}

/* example "images" */
#one, #four {
  background-color: #aaaaaa;
}
#two, #five {
  background-color: #222222;
}
#three, #six {
  background-color: #777777;;
}

#zero {
  background-color: #ee2277;;
}

<div >
  <div >
        <div >
            <div >
                <div  id="zero">
                </div>
            </div>
            <div >
                <div  id="one">
                </div>
            </div>
            <div  >
                <div  id="two">
                </div>
            </div>
            <div >
                <div  id="three">
                </div>
            </div>
            <div >
                <div  id="four">
                </div>
            </div>
            <div >
                <div  id="five">
                </div>
            </div>
            <div >
                <div  id="six">
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Try something like this:

/** @param {HTMLElement} sliderEl */
function scaleSlider(sliderEl) {
    let totalWidth = 0;
    sliderEl.querySelectorAll(".item").forEach(item => totalWidth  = item.getBoundingClientRect().width);
    sliderEl.style.width = `${totalWidth}px`;
}