Search code examples
javascriptcodeigniterlooper

looper.js with controls in codeigniter

I'm working on a website and I have to implement a carousel of images. My choice fell on looper.js since it is simple and lightweight.

But I'm having problems in codeigniter:
- I imported the style sheet.
- I imported the javascript file.
- The carousel works.

But problems comes when I want to implement the controls, since I have a problem not recognizing "prev" and "next". First, do not put the arrows, and then if I click it brings me to the carousel div instead of changing the slide.

Here is the code I implemented:

<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>
Solution

  • The problem I noticed is that you are using $('.looper').looper(); but you don't need to because you are already using data-looper="go" in your div. Hope that helps.