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

Question

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

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

感谢您对此的帮助！

Answer 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 文件中

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

prettyPhoto product slider - How to center an image

javascript

wordpress

slider

prettyphoto

woocommerce