如何将带有叠加层的 HTML 输出放入 OwlCarousel

Question

我的页面中有一个滑块，每个滑块都有自己的覆盖说明，并且该说明采用 HTML 格式。

在我的管理模块中有一个设置，用户可以使用 CKEditor 创建自己的带有自定义消息的滑块图像。

我的问题是，当我尝试在滑块中显示描述时，它只是普通的 HTML 代码。

这是我的一些代码：

控制器部分

foreach($results as $result) {

            if ($result['banner_image'] && file_exists(DIR_IMAGE . $result['banner_image'])) {
                $image = $this->model_tool_image->resize($result['banner_image'], 40, 40);
                $banner_image_large = HTTP_IMAGE . $result['banner_image'];
            } else {
                $image = $this->model_tool_image->resize('no_image.jpg', 40, 40);
            }

            $url = '&banner_id=' . (int)$result['banner_id'];

            $this->data['banners'][] = array(
                'banner_id' => $result['banner_id'],
                'banner_image' => $image,
                'banner_image_large' => $banner_image_large, // here's the image to be use in the slider
                'code_description' => $result['banner_description'], //here's the raw HTML formatted description
                'description' => strip_tags(html_entity_decode($result['banner_description'])),
                'banner_link' => $result['banner_link'],
                'action' => $this->url->link('project/banner_slider/update', 'token=' . $this->session->data['token'] . $url, 'SSL')
            );

        }

在我看来

<h1>Carousel Demo</h1>

    <div id="owl-demo" class="owl-carousel owl-theme">
        <?php foreach($banners as $banner) { ?>
            <div class="item">
                <div class="textoverlay"><?php echo $banner['code_description']; ?></div> <!-- overlay the decription -->
                <img src="<?php echo $banner['banner_image_large']; ?>" />
            </div>
        <?php } ?>
    </div>

这是一些CSS

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

.textoverlay{
    position: absolute;
    display:block;
 }

和 JS:

$('#owl-demo').owlCarousel({
    autoPlay : 3000,
    stopOnHover : true,
    navigation : false, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem:true,
    autoHeight : true,
    transitionStyle:"fade"
});

Answer 1

用 $.parseHTML("your html here");

包围原始 html

Answer 2

好的，我用 html_entity_decode() 函数解决了它

如何将带有叠加层的 HTML 输出放入 OwlCarousel

How to put the HTML output with overlay inside the OwlCarousel

html

css

php

jquery

owl-carousel