JQuery — PHP CodeIgniter против Каруфредсел

Итак, я работаю над этим сайтом онлайн-курсов, на котором все курсы основаны на видео. Когда вы находитесь на странице курса, у нас есть основное видео и ниже эскизы оставшихся глав. Вот как это выглядит (не могу опубликовать изображение здесь):

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

Эти миниатюры представляют собой простой запрос PHP, который выглядит следующим образом (capitulos_id означает 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>

И он использует CarouFredSel для отображения в слайдере карусели, js:

$("#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"},
});

Проблема заключается в следующем: когда вы нажимаете на миниатюру, сайт переносит вас на страницу новой главы (что правильно), но карусель полностью опускается вниз. Это означает, что если у нас более 5 глав, текущая глава может оказаться вне поля зрения пользователя, что вводит некоторых клиентов в заблуждение.

Я пытаюсь улучшить его, чтобы карусель всегда имела текущую главу в качестве первого элемента, отображаемого слева. Но я не могу понять, как это сделать.

Любая хорошая душа готова помочь мне? 🙂

Спасибо!

1

Решение

Спасибо @charlietfl, и извините за это. Я думаю, что я понял это, ребята. Я изменил свой PHP-запрос на:

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

И мой JS:

$("#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"},
});

Ура!

ура

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]