Wordpress WooSlider 箭头在 100% 时损坏？

Question

首先，我使用的是 MacBook 15" Retina 显示屏。在这个网站上工作时，我注意到当我在 Chrome 上以 100% 启用滑块查看页面时，箭头是损坏（两个左向箭头位于错误的位置）请参见下面的屏幕截图。

这里还有一个 link 页面：site link

当我缩小到 90% 缩放，或将浏览器 window 缩小到足够小时，箭头看起来很好并且应该居中。我担心这在其他显示器上也会被破坏，我可以在 css 中调整什么来解决这个问题吗？提前致谢。

Answer 1

简短回答：是的。 Wooslider 中的箭头被塞住了。此外，用这么大的图像来做这么小的箭头是……错误？。有很多更好的方法来绘制箭头（SVG、字体、图标）。如果文件保持最小（大约 100px × 50px - 可能更少），即使这个解决方案（使用图像）也是可以接受的。但是这个只有 2 个小箭头有 1000px × 600px。脑洞大开）。

嗯，废话少说，这会将您的箭头固定在 769px 和 1260px 之间的宽度上。我不知道为什么 Wooslider 使用 768px/769px 作为响应断点，而大多数其他响应框架使用 767px/768px，但这是插件作者的选择（只是不要将 Wooslider 与 Bootstrap 一起使用）：

@media (max-width: 1260px) and (min-width: 769px) {
  .wooslider .wooslider-direction-nav a {
    top: 50%;
    background: url('/wp-content/plugins/wooslider/assets/images/nav_arrows-3.png') no-repeat 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 15%;
  }
  .wooslider .wooslider-direction-nav .wooslider-next {
    background-position: 100% 0;
    right: 0;
    width: 50%;
  }
}

作为旁注，您应该将 jQuery 脚本包装在

中

jQuery(document).ready(function( $ ) {

    // your code here

});

您页面中的一些 jQuery 脚本因此抛出错误，显然它们不起作用。

Wordpress WooSlider 箭头在 100% 时损坏？

Wordpress WooSlider arrows broken at 100%?

html

css

wordpress

slider

zooming