终于尝试学习响应式设计，需要一个幻灯片。我能够轻松地在一个页面上启动并运行 Owl 轮播并喜欢它(测试页的页脚正上方)：http://cismiami.org/new.html
我想调整幻灯片以用于员工照片：http://cismiami.org/owlstaff.html
我找到了切换到箭头并将它们与图像放在同一行的说明，但无法弄清楚如何让它们出现在图像轮播之外而不是叠加在它们上面。我正在为 CSS 文件使用单独的文件夹，所以我不会弄乱第一个示例，但这是我用于员工页面的 CSS 文件：
http://cismiami.org/js/owlstaff/assets/owl.carousel.css http://cismiami.org/js/owlstaff/assets/owl.theme.default.css
任何帮助将不胜感激。
我不是专业人士(只是一个业余爱好者)，但我想我对这个和那个有所了解。我自己很难测试这一点，因为大多数资产都在其他地方，而你正在处理别人的代码，而这些代码本身一开始就很混乱。如果你从头开始设计和编码它，你就会确切地知道如何去做。在这个过程中学到了很多东西。
无论如何，在">owl.theme.default.css"中，箭头可以按照您所说的进行自定义。将箭头放在轮播之外的快速而肮脏的方法(在这种情况下是糟糕的解决方案)是向左右箭头添加负位置值。由于它们是绝对定位的，它们可以非常自由地移动，但不能完全响应。以下方法打破了它们的预期目的，保持在图片的顶部，从而与流程保持一致。
向左右添加负值，例如 40px：.owl-prev { left： -40px; } .owl-next { right： -40px; }
但是，这会破坏响应能力，因为一旦您开始缩小页面，箭头就会消失在页面流之外。毕竟，它们是绝对定位的，并且依赖于它们的父/容器对象。也许有一种方法可以在缩小到足够小的情况下回到这些原始位置，但很难从这些赤裸裸的混乱开始说。很多事情都可能出错。也许媒体查询方法一旦达到一定的像素数，然后更改为 left：0;对：0;？我自己还没有使用过它们，但很快就需要用到我当前的项目中。
在我看来，将箭头移到漂亮的响应式设计之外也违背了网站的外观。它会破坏凝聚力。对我来说，这些箭头在图片顶部看起来绝对没问题，几乎没有干扰性。也许在箭头上添加一些透明度/不透明度会使它们对您的眼睛造成更少的问题，将鼠标悬停在它们上面可以恢复其当前的可见性？现在就到此为止。