Итак, я работаю над этим сайтом онлайн-курсов, на котором все курсы основаны на видео. Когда вы находитесь на странице курса, у нас есть основное видео и ниже эскизы оставшихся глав. Вот как это выглядит (не могу опубликовать изображение здесь):
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 глав, текущая глава может оказаться вне поля зрения пользователя, что вводит некоторых клиентов в заблуждение.
Я пытаюсь улучшить его, чтобы карусель всегда имела текущую главу в качестве первого элемента, отображаемого слева. Но я не могу понять, как это сделать.
Любая хорошая душа готова помочь мне? 🙂
Спасибо!
Спасибо @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"},
});
Ура!
ура
Других решений пока нет …