Wordpress WooSlider箭头以100％折断？

Question

首先，我使用的是MacBook 15“Retina显示屏。在这个网站上工作，我注意到当我在Chrome浏览器上查看启用了100％滑块的页面时箭头被打破（两个左箭头）位于错误的地方）见下面的截图。

以下是该页面的链接：site link

当我进行90％缩放或缩小浏览器窗口时，箭头看起来很好并且应该居中。我担心这会在其他显示屏上翻译过来，有什么我可以在css中调整来解决这个问题吗？提前谢谢。

Answer 1

简短回答：是的。在Wooslider中加入了箭头。此外，使用这么大的图像这么小的箭头是...... 错误？有更好的方法来绘制箭头（SVG，字体，图标）。如果文件保持最小（大约100px×50px - 也许更少），即使这个解决方案（使用图像）也是可以接受的。但这个只有2个小箭头的1000px×600px。 Mindblowing）。

嗯，除了咆哮之外，这将修复你的箭头在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脚本会抛出错误，显然它们不起作用。