Owl Carousel dotsData配置问题：如何正确实现缩略图显示？

你的代码问题出在引号冲突：data-dot属性的双引号和内部<img>标签的双引号未转义，导致浏览器解析HTML时提前闭合属性，Owl Carousel无法正确识别缩略图内容。以下是几种正确写法：

方法1：转义冲突的引号 #

通过转义内部双引号，确保HTML结构完整：

echo '<div class="item" data-dot="<img src=&quot;images/renders/img-' . $i . '.jpg&quot;>"><img src="images/renders/img-' . $i . '.jpg"></div>';

或者切换引号类型，用单引号包裹外层属性，内部用双引号（无需转义）：

echo "<div class='item' data-dot='<img src=\"images/renders/img-$i.jpg\">'><img src='images/renders/img-$i.jpg'></div>";

方法2：使用HEREDOC语法（推荐） #

HEREDOC可以直接编写多行HTML，无需处理引号转义，代码可读性更强：

echo <<<HTML
<div class="item" data-dot="<img src='images/renders/img-$i.jpg'>">
    <img src="images/renders/img-$i.jpg">
</div>
HTML;

关键说明 #

只要保证data-dot属性内的HTML代码结构完整、引号不冲突，Owl Carousel开启dotsData: true后就能正确渲染缩略图作为导航点。

内容的提问来源于stack exchange，提问作者Óscar Rabadán