我正在一个网站上,我必须实现图像轮播。我的选择落在looper.js上,因为它既简单又轻巧。
但是我在codeigniter中遇到问题:
-我导入了样式表。
-我导入了javascript文件。
-轮播作品。
但是,当我要实现控件时会遇到问题,因为我无法识别“上一个”和“下一个”。
首先,不要放置箭头,然后单击它会将我带到轮播div,而不是更改幻灯片。
这是我实现的代码:
<div id="controlLooper" data-looper="go" class="looper slide" style="width: 100%; height: 312px; z-index: 0;">
<div class="looper-inner">
<?php
foreach($images as $photo)
{
echo "<div class='item'>";
echo "<img src='" . $this->config->item('base_url') . $this->config->item('img') . $this->config->item('car') . "/" . $photo . "' alt='' style='width: 100%; height: 312px;' alt=''>";
echo "</div>";
}
?>
</div>
<nav>
<a class="looper-control" data-looper="prev" href="#controlLooper">
<i class="icon-chevron-left"></i>
</a>
<a class="looper-control right" data-looper="next" href="#controlLooper">
<i class="icon-chevron-right"></i>
</a>
</nav>
</div>
最佳答案
我注意到的问题是您正在使用$('.looper').looper();
,但您并不需要,因为您已经在data-looper="go"
中使用了div
。希望能有所帮助。
关于javascript - 在codeigniter中具有控件的looper.js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29432342/