Question

我正在研究这个项目http://color-run.giedre.dk/。我想用图像替换当前滑块，但仅用于移动版本。这是 wordpress网站。如果有人可以帮忙的话会非常棒吗？

Answer 1

将图片放在HTML中的滑块下方：

<img src="#" class="mobile-image">

将它隐藏在CSS中：

.mobile-image {
    display: none;
}

隐藏滑块，使用媒体查询显示图像，调整最小/最大宽度以满足您的需求：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px) {

    .cycloneslider {
        display: none;
    }
    .mobile-image {
        display: block;
    }
}

Answer 2

您可以使用相对可靠的wp_is_mobile()Function。然后运行CSS，如果它是移动的 - 这样你就不必运行一堆媒体查询：

<?php if(wp_is_mobile()) : ?>
    <style type="text/css">
        ...
    </style>
<?php endif; ?>

将滑块包裹在IF ? ELSE

中

<?php if(!wp_is_mobile()) : ?>
    <div id="sliderWrapper">
        ...
    </div> 
<?php else : /** Is Mobile **/ ?>
    <img src="...
<?php endif; ?>

Wordpress滑块替换为移动屏幕的图像

2 个答案: