猫头鹰旋转木马2 - 如何在幻灯片放映之外获得左箭头和右箭头？

Posted 2021-04-06

最后尝试学习响应式设计并需要幻灯片。我能够轻松地将Owl Carousel放在一个页面上运行并且喜欢它（在测试页面的页脚上方）：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; }

然而，这将破坏响应性，因为一旦开始缩小页面，箭头将在页面流之外消失。毕竟它们绝对定位，并且依赖于它们的父/容器对象。也许有一种方法，一旦缩小，他们就可以转回原来的位置，但很难从这些光秃秃的杂乱开始说出来。很多事情都可能出错。也许Media Query方法一旦达到某个像素数，然后变为left：0;右：0 ;?我自己没有使用它们，但很快就需要使用我当前的项目。

在我看来，将箭头移动到漂亮的响应式设计之外也与网站的外观相反。它会打破凝聚力。对我来说，这些箭头在图片上看起来绝对精美，几乎没有侵入性。也许为箭头添加一些透明度/不透明度会使它们对你的眼睛问题减少，将鼠标悬停在它们上面可以恢复当前的可见度？这就是现在。