Задать вопрос
@WildKayote
javascript

Как можно реализовать подобный слайдер?

www.icreon.co.uk
Слайдер в шапке
  • Вопрос задан
  • 1371 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
LenovoId
@LenovoId
svg, css,js
скомуниздить не вариант ?
Ответ написан
10 комментариев
10 комментариев
Пригласить эксперта
Ответы на вопрос 1
@Ridz
минимализм на тему слайдера, ждите загрузки фото
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body,html{
    height:100%;
  }

  #slider>div{
    position:absolute;
    background-size:cover;
    width:20%;
    height:50%;
    transition:all 1s;
    text-align:center;
    line-height:20em;
    background-color: rgba(51, 102, 0, 1);
  }

  #slider>div span{
    opacity:0;
    font-size:72px;
    color:rgba(255,255,255,1);
  }

  #slider{
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
  }

  #slider>div:nth-child(1){
    left:-20%;
    top:-50%;
  }

  #slider>div:nth-child(2){
    left:0;
    top:0;
  }

  #slider>div:nth-child(3){
    left:0%;
    top:50%;
  }

  #slider>div:nth-child(4){
    left:20%;
    top:0%;
    width:60%;
    height:100%;
  }

  #slider>div:nth-child(4) span{
    opacity:1;
    transition:.8s 1.4s;
  }

  #slider>div:nth-child(5){
    left:80%;
    top:0%;
  }

  #slider>div:nth-child(6){
    left:80%;
    top:50%;
  }

  #slider>div:nth-child(7){
    left:100%;
    top:0%;
  }

  #slider>div:nth-child(6)~div{
    visibility:hidden;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
(function fn()
{
   $("#slider > div:nth-child(1)").appendTo("#slider");
   window.setTimeout(fn,3000)
}())
});
  </script>
</head>

<body>
<div id="slider">
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=1)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=2)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=3)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=4)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=5)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=6)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=7)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=8)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=9)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=10)"><span>paris</span></div>
</div>

</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Установить Windows на Dedicated Server
16 апр. 2024, в 22:49
2500 руб./за проект
YOLO для распознания количества человек в очереди на кассу по видео ряду
16 апр. 2024, в 22:48
5000 руб./за проект
Скопировать и доработать нативное Java приложение на React Native
16 апр. 2024, в 22:44
5000 руб./за проект
Ещё заказы