Javascript 将幻灯片分割宽度更改为图像宽度 " />

在此Jssor滑块中，如何将滑块div max width更改为image width。下面给出了指向Jssor滑块的链接。谢谢！

假设页面上可能有更多滑块，每个滑块中可能有更多图像，这就是方法：

<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden; ">

        <div data-p="170.00" >
            <img data-u="image" src="../../../Admin/Products and Services/images/<?php echo $img1 ;?>" />
        </div>
<div>

---

下面是一个快速演示，演示如何执行此操作：

document.querySelectorAll("[data-u=slides]").forEach(slider=>{
    var maxWidth=0;
    slider.querySelectorAll("img")
        .forEach( image => {
            maxWidth=Math.max(maxWidth,image.width)
        });
    slider.style.maxWidth=maxWidth+"px";
})

我假设你想要将容纳内部div的外部div拉伸到内部div的内部图像的大小。我还假设没有libs，只是香草。我还假设你想要它与旧浏览器兼容，所以没有像箭头这样的花哨东西

如果你有多张照片，你需要把它们的大小加起来，中间可能有边距、边框和填充物。这张照片需要我用CSS来查看你的整个HTML，这样我就知道我需要考虑什么了

这是一个带照片的演示，来自互联网：

Ofc，删除控制台日志，它们仅用于演示

var imageFrame = document.querySelector("div[data-u='slides']");
var imagediv= imageFrame.querySelector("div[data-p='170.00'] > img");

console.log("before: " + imageFrame.offsetWidth, imagediv.offsetWidth);

imageFrame.style.width = imagediv.offsetWidth+"px";

console.log("after: " + imageFrame.offsetWidth, imagediv.offsetWidth);