<div id=" sliderContainer" class="w-10/12 overflow-hidden">
<ul id="slider" class="flex w-full">
<li class=" p-5">
<div class="border rounded-lg p-5">
<img th:src="@{'/images/logo.png'}" class="h-28 w-full rounded-lg object-cover" alt="">
<h2 class="mt-2 font-bold text-center text-gray-700">Some BigHeadline</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore maxime illo, incidunt
</p>
<button class="mt-3 px-6 py-3 rounded-md bg-green-800 text-white">Read More</button>
</div>
</li>
let sliderContainer = document.getElementById('sliderContainer');
let slider = document.getElementById('slider');
let cards = slider.getElementsByTagName('li');
let elementsToShow = 3;
let sliderContainerWidth = sliderContainer.clientWidth;
let cardWidth = sliderContainerWidth / elementsToShow;
slider.style.width = cards.length * cardWidth + 'px';
for (let index = 0; index < cards.length; index++) {
const element = cards[index];
element.style.width = cardWidth + 'px';
}
每当我尝试运行时,它都会显示无法读取 clientwidth 上的空引用 我尝试将脚本添加到代码底部
div 容器 id 中的间距很小,请删除此处的小间距