Связанный слайдер в котором данные двигаются в три строки
Вот дизайн блока:
Мысли:
- Считаю целесообразным выполнение задачи на базе bx-слайдера.
- Для решения будет создано 2 связанных bx-слайдера. Первый слайдер — для галереи лиц команды профессионалов, второй слайдер — с подробной информацией о них.
- Каждый слайд галереи лиц будет состоять из 5х3 элементов. Я не стану включать одновременное отображение 13слайдов (+2 стрелочки), и заморачиваться с тем, чтобы слайды сдвигались по 1 шт змейкой. Это трудоемко и не рационально.
- Итого, у меня в каждом слайдере будет количество слайдов соответствующее количеству лиц в галерее. Этот вывод можно сделать исходя из того, что мне надо вывести 1 раз данные о каждом человеке.
Ниже приведу код, который поможет разобраться в идее. Если найду время — доделаю его полностью. Сейчас приведенный код работает, в нем не все параметры заполнены, но для изучения идеи он подходит. На его основе я сделал отлично работающие слайдеры в проекте.
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css"/>
</head>
<body>
<div class="users_icons">
<div class="users_icons_slider">
<div class="users_icons_slide">
<div class="single_slide_group">
<div class="unit users_icons_slider_prev_slide"> < </div>
<div class="unit"> 1 </div>
<div class="unit"> 2 </div>
<div class="unit"> 3 </div>
<div class="unit"> 4 </div>
<div class="unit"> 5 </div>
<div class="unit" onclick="userslider.goToPrevSlide(); return false;"> 6 </div>
<div class="unit"> 7 </div>
<div class="unit"> 8 </div>
<div class="unit"> 9 </div>
<div class="unit"> 10 </div>
<div class="unit"> 11 </div>
<div class="unit"> 12 </div>
<div class="unit"> 13 </div>
<div class="unit users_icons_slider_next_slide"> > </div>
</div>
</div>
<div class="users_icons_slide">
<div class="single_slide_group">
<div class="unit users_icons_slider_prev_slide"> < </div>
<div class="unit" style="background: url(http://eurocoast-group.site.portfolio.mels.industries/wp-content/themes/EC/lp_about_us/images/pic-1.jpg) center center no-repeat; background-size: cover; "> 1</div>
<div class="unit"> 3 </div>
<div class="unit"> 4 </div>
<div class="unit"> 5 </div>
<div class="unit"> 6 </div>
<div class="unit sliderlink" link_to_slide="0"> 7 </div>
<div class="unit"> 8 </div>
<div class="unit"> 9 </div>
<div class="unit"> 10 </div>
<div class="unit"> 11 </div>
<div class="unit"> 12 </div>
<div class="unit"> 13 </div>
<div class="unit"> 14 </div>
<div class="unit users_icons_slider_next_slide"> > </div>
</div>
</div>
</div>
</div>
<div class="users_details">
<div class="users_details_slider">
<div class="users_details_slide">
<div class="single_user">
info 1
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 2
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 3
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 4
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 5
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 6
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 7
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 8
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 9
</div>
</div>
<div class="users_details_slide">
<div class="single_user">
info 10
</div>
</div>
</div>
</div>
<style>
.users_icons { width: 630px; height: 380px; }
.users_icons .users_icons_slide { width: 630px; height: 380px; }
.users_icons .single_slide_group { width: 630px; height: 380px; }
.users_icons .single_slide_group:after { clear: both; display: block; content: ''; }
.users_icons .sliderlink { cursor: pointer; }
.users_icons .unit { height: 100px; width: 100px; border-radius: 50%; float: left; line-height: 100px; text-align: center; margin: 5px 10px 10px 5px; }
.users_icons .users_icons_slider_prev_slide, .users_icons .users_icons_slider_next_slide { background: white; -moz-box-shadow: 0 0 10px #b5b5b5; -webkit-box-shadow: 0 0 10px #b5b5b5; box-shadow: 0 0 10px #b5b5b5; }
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* user images slider */
var users_icons_slider = $('.users_icons_slider').bxSlider({
pager: false,
controls: false,
mode: 'fade'
});
/* user details slider */
var users_details_slider = $('.users_details_slider').bxSlider({
pager: false,
controls: false,
mode: 'fade',
startSlide: 6
});
/* user images slider settings */
$('.users_icons_slider_prev_slide').click(function(){
users_icons_slider.goToPrevSlide();
users_details_slider.goToPrevSlide();
return false;
});
$('.users_icons_slider_next_slide').click(function(){
users_icons_slider.goToNextSlide();
users_details_slider.goToNextSlide();
return false;
});
$('.sliderlink').click(function(){
var nav_to_slide = $(this).attr('link_to_slide');
users_icons_slider.goToSlide(nav_to_slide);
});
});
</script>
</body>
</html>
Комментарии к статье
Добавьте свой комментарий - оставьте след в блоге!
Вы должны войти на сайт.