Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="banner-container"> <ul class="ul-width"> <li> <a href="#"><img src="photo.jpg" alt="" /></a> <span class="overlay"></span> </li> <li> <a href="#"><img src="photo.jpg" alt="" /></a> <span class="overlay"></span> </li> <li> <a href="#"><img src="photo.jpg" alt="" /></a> <span class="overlay"></span> </li> <li> <a href="#"><img src="photo.jpg" alt="" /></a> <span class="overlay"></span> </li> <li> <a href="#"><img src="photo.jpg" alt="" /></a> <span class="overlay"></span> </li> </ul> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.banner-container { overflow: hidden; position: relative; } .banner-container li { float: left; overflow: hidden; cursor: pointer; position: relative; z-index: 9; } .banner-container li a { display: block; padding: 0px; margin: 0px; } .banner-container li a img { max-width: none; height: 200px; /* Высота фотографий */ } .banner-container li span.overlay { background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(window).on("load", function () { var sum=0; $('.banner-container li img').each(function(){ sum += $(this).width(); }); $('.banner-container ul').width(sum); }); $(function(){ var winWidth = $(".banner-container").width(); var ulWidthCount = 0; ulWidthCount = $('.banner-container li').length; $(".banner-container li").width(winWidth/ulWidthCount); $(".banner-container li").hover(function(){ ulWidthCount = $('.banner-container li').length; var imgWidth = $(this).find("img").width(); var bannerLi = winWidth - imgWidth; var remWidth = ulWidthCount - 1; var appWidth = bannerLi/remWidth; $(".banner-container li").stop(true, false).animate({width: appWidth},700); $(this).stop(true, false).animate({width: imgWidth},700); $(this).find("span.overlay").stop(true, false).fadeOut(); }, function(){ $(this).animate({width: winWidth/ulWidthCount},700); $(".banner-container li").animate({width:winWidth/ulWidthCount},700); $(this).find("span.overlay").fadeIn(); }); }); |
splits-slider на github
Вариант без использования JS:
Похожее решение можно сделать без использования скриптов.
Плюс добавим к этому диагональное разделение (как просили в комментариях).
HTML:
Точно такой же, как и в примере выше
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.banner-container { overflow: hidden; position: relative; } .banner-container ul { padding: 0; display: flex; width: calc(100% + 60px); margin-left: -30px; } .banner-container li { clip-path: polygon(60px 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%); position: relative; margin: 0 -35px; width: calc(100% / 5 + 70px); /* 5 - кол-во фотографий */ transition: width 0.5s ease-in; } .banner-container li a { display: block; background: #000; } .banner-container li a img { max-width: none; height: 200px; width: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.7s ease-in; } .banner-container ul li:hover { width: 100%; } .banner-container ul li:hover a img { opacity: 1; } |
В итоге у нас получится это:
Можно ли гармошку через диагональные разделения?
Можно, но там помудрить надо, например
для li устанавливаем обрезку и отрицательный маргин с запасом:
И дальше уже на JS нужно увеличить ширину всего, т.к. у нас будет наложение одних фоток на другие.
Добавил решение
Благодарю за ответ.