prettyPhoto 产品滑块 - 如何使图像居中答案

【问题标题】：prettyPhoto product slider - How to center an imageprettyPhoto 产品滑块 - 如何使图像居中
【发布时间】：2020-11-13 03:32:45
【问题描述】：

我正在尝试建立一个 WooCommerce 网站 (https://storetest.rigwald.com/?cmp_bypass=test)，它使用基于 prettyPhoto.js 的产品滑块。问题是图像不在滑块中间居中，它们显示在滑块画布/窗口的左侧幻灯片上。有没有办法强制图像在滑块中居中？主题创建者似乎对他们自己的产品没有概念，只是告诉我将滑块中显示的任何产品的图像尺寸更改为 800x512，即使产品照片应该是 600x600 或 800x800。他们只是想让我填充滑块“画布”，因此偏离中心的图像并不明显。

我不是程序员。我可以在 Woocommerce/Wordpress 中浏览 Chrome 开发者工具和主题编辑器，这就是我发现滑块正在使用 prettyPhoto 的方式。

感谢您对此的帮助！

【问题讨论】：

标签： javascript wordpress woocommerce slider prettyphoto

【解决方案1】：

看看你的主题，你似乎只需要一些 css 来解决问题。

我创建了一个插入一些内联样式的操作，应该有助于解决该问题。

add_action('wp_head', 'bt_custom_inline_style');
function bt_custom_inline_style () {
?>
<style>
    .big-slider .home-slider li {
        display: flex;
        justify-content: center;
    }
</style>
<?php
}

您可以将此代码复制粘贴到您的functions.php文件中

【讨论】：

非常感谢非常。我已经与主题创建者的“技术支持”来回讨论了 2 周，他们唯一的解决方法是将滑块中任何产品的图像大小更改为 800x512。当然不是修复。