php - 如何将带有覆盖的 HTML 输出放入 OwlCarousel

Question

我的页面中有一个 slider ，每个 slider 都有自己的叠加描述，并且该描述采用 HTML 格式。

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

我的问题是，当我尝试在 slider 中显示描述时，它只是纯 HTML 代码。

这是我的一些代码:

Controller 部分

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