PHP CodeIgniter vs. Caroufredsel

Question

So, I'm working on this online courses website in which all courses are based on videos. When you are at a course's page we have the main video and below the thumbnails of the remaining chapters. Here's how it looks like (can't post the image here):

https://www.dropbox.com/s/36qyqreoq3s21qo/Screen%20Shot%202015-04-16%20at%2016.53.13%20.png?dl=0

These thumbnails is a simple PHP query that looks like this (capitulos_id means chapters_id):

    <ul id="lista-videos-curso">
        <?php $i = 0; ?>
        <?php foreach($videos as $video) : ?>
        <?php if($video->capitulos_id < $loadedVideo[0]->capitulos_id){ $i++; } ?>
        <li>
            <a href="<?php echo base_url('aluno/curso/'.$curso[0]->curso_id.'/'.$curso[0]->curso_url.'/'.$video->videos_id); ?>">
                <?php if($video->videos_id == $loadedVideo[0]->videos_id) : ?>
                <p><img class="selected" src="<?php echo base_url('course_images/course_thumbs/'.$video->videos_thumb); ?>" /></p>
                <?php else: ?>
                <p><img src="<?php echo base_url('course_images/course_thumbs/'.$video->videos_thumb); ?>" /></p>
                <?php endif; ?>
                <p><?php echo /* $video->capitulos_id.'.'.*/ $video->videos_nome; ?></p>
            </a>
        </li>
        <?php endforeach; ?>
    </ul>
</section>

And it uses CarouFredSel to display in a carousel slider, the js is:

$("#lista-videos-curso").carouFredSel({
    items : {
        start: init,
    },

    scroll : {
        items           : 1,
        //easing            : "cubic",
        //duration      : 1000,                         

    },
    width:1000,
    infinite: false,
    circular: false,

    auto : {
        play: false,
    },
    prev:{
        button  : "#prev-arrow-lista-curso",
        key     : "left"
    },
    next    : {
        button  : "#next-arrow-lista-curso",
        key     : "right"
    },                  
}); 

The problem is: When you click on a thumbnail the site takes you to the page of the new chapter (which is correct), but the carousel slides down all the way right. That means that if we have more than 5 chapters, the current chapter may be out of sight to the user, which is confusing some clients.

I'm trying to improve it, so that the carousel always have the current chapter as the first item displayed on the left. But I can't figure out how to do it.

Any good soul willing to help me? :)

Thanks!

Answer 1

Thanks @charlietfl, and sorry for that. I think I got it folks. I've changed my php query to:

    <ul id="lista-videos-curso">
        <?php $i = 0; ?>
        <?php foreach($videos as $video) : ?>
        <?php if($video->capitulos_id < $loadedVideo[0]->capitulos_id){ $i++; } ?>
        <?php if($video->videos_id == $loadedVideo[0]->videos_id) : ?>
        <li class="first-thumb">
            <a href="<?php echo base_url('aluno/curso/'.$curso[0]->curso_id.'/'.$curso[0]->curso_url.'/'.$video->videos_id); ?>">
                <p><img class="selected" src="<?php echo base_url('course_images/course_thumbs/'.$video->videos_thumb); ?>" /></p>
                <p><?php echo /* $video->capitulos_id.'.'.*/ $video->videos_nome; ?></p>
            </a>
        </li>
        <?php else: ?>
        <li>
        <a href="<?php echo base_url('aluno/curso/'.$curso[0]->curso_id.'/'.$curso[0]->curso_url.'/'.$video->videos_id); ?>">       
            <p><img src="<?php echo base_url('course_images/course_thumbs/'.$video->videos_thumb); ?>" /></p>
            <p><?php echo /* $video->capitulos_id.'.'.*/ $video->videos_nome; ?></p>
            </a>
        </li>
        <?php endif; ?>
        <?php endforeach; ?>
    </ul>
</section>

And my JS to:

$("#lista-videos-curso").carouFredSel({
    items : {
        start: ".first-thumb",
    },

    scroll : {
        items           : 1,
        //easing            : "cubic",
        //duration      : 1000,                         

    },
    width:1000,
    infinite: false,
    circular: false,

    auto : {
        play: false,
    },
    prev:{
        button  : "#prev-arrow-lista-curso",
        key     : "left"
    },
    next    : {
        button  : "#next-arrow-lista-curso",
        key     : "right"
    },                  
}); 

Yay!

Cheers