1

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>
denis
  • 37
  • 6
  • This seems to be working fine on my end... Now you are using multiple carousels. Do they all have different Ids.? – CodeGodie Apr 03 '15 at 13:15
  • Another thing I noticed. in your website sample, if you look at the console, you get this error: `Uncaught TypeError: Cannot read property 'looper' of undefined` but I do not have that on my local when I try it out. Would this maybe have to do with it? – CodeGodie Apr 03 '15 at 13:17
  • Great, no problem. I also noticed another problem. you are using `$('.looper').looper();` but you dont need to because you are already using `data-looper="go"` in your div. Hope that helps as well. – CodeGodie Apr 03 '15 at 13:26
  • Youre welcome. Unfortunately I dont think theres a section where you can mark your Original Post (OP) as "solved". What needs to happen is that you have to accept an answer. Do you want me to provide you with an answer so that you can accept it? – CodeGodie Apr 03 '15 at 13:29
  • If you want I can do it for you at least get up your reputation :) – denis Apr 03 '15 at 13:46

1 Answers1

0

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.

CodeGodie
  • 12,116
  • 6
  • 37
  • 66