只有在页面刷新后才能正确显示平滑滑块

是因为在前端开发中，平滑滑块通常是通过JavaScript或CSS动画来实现的。当页面加载时，浏览器会按照HTML、CSS和JavaScript的顺序解析和渲染页面。如果平滑滑块的相关代码在页面加载完成之前执行，可能会导致滑块无法正确显示。

为了解决这个问题，可以采取以下几种方法：

1. 延迟加载：可以将平滑滑块的相关代码放在页面底部，或者使用延迟加载的方式，确保在页面其他元素加载完成后再加载滑块相关代码。这样可以避免滑块在页面加载时出现问题。
2. 事件监听：可以监听页面加载完成的事件，如DOMContentLoaded事件或window.onload事件，在事件触发后再执行滑块相关代码。这样可以确保滑块在页面加载完成后再进行初始化和显示。
3. CSS动画：可以使用CSS动画来实现平滑滑块效果，而不依赖于JavaScript。CSS动画可以在页面加载完成后自动播放，无需额外的代码触发。可以使用CSS的transition或animation属性来实现平滑滑块的过渡效果。
4. 异步加载：可以将滑块相关代码放在异步加载的脚本文件中，通过异步加载的方式加载滑块代码。这样可以确保滑块代码在页面加载完成后再进行加载和执行。

总结起来，只有在页面刷新后才能正确显示平滑滑块是因为滑块相关代码的加载和执行时机不正确。通过延迟加载、事件监听、CSS动画或异步加载等方式可以解决这个问题。具体的实现方式可以根据具体的项目需求和技术选型来确定。