我正在一个网站上,我必须实现图像轮播。我的选择落在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/

10-10 03:57