主页 / 问题 / 1607880
Accepted
Olga Coin
Asked:2025-02-28 19:59:35 +0000 UTC2025-02-28 19:59:35 +0000 UTC

带有圆形进度条和文本的光滑点作为图标

  • 772

这是该网站首页的设计布局。任务是当您按下箭头/滑动时更改照片和正文（在布局的左上部分）。其余部分保持原位（按钮、箭头、点）。但这里似乎没有解决方案。好的 – 让所有元素滑动。

问题不同：如何在Slick滑块中以带有圆形动画的图标形式实现dota？那么该文本是否放置在每个文本的旁边？当然，当更换幻灯片时，动画会移动到下一个圆圈，等等。

第二天我绞尽脑汁却什么也想不出来。 codepen 上有类似的解决方案，但这并不完全符合我的情况（不幸的是，链接无效）。

请帮我弄清楚该怎么做！ 在此处输入图片描述

javascript

1 个回答

  1. Best Answer

    Slick slider 有一段负责点的代码（你可以在浏览器 devtools 中看到它）：

    <ul class="slick-dots" style="display: block;" role="tablist">
  <li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation10" id="slick-slide10"><button type="button" data-role="none" role="button" tabindex="0">1</button></li>
  <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation11" id="slick-slide11" class=""><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
  <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation12" id="slick-slide12"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
</ul>

    因此，在滑块代码生成完成后，需要设置ul.slisk-dots已经有的点的位置position: absolute。热点有一个类slisk-active，您可以在 CSS 中为这个类定义一个圆形动画。动画的持续时间取决于您在滑块设置中选择的幻灯片显示时间。全部。

    • 1

相关问题