Комментарий #9746059

animeshnik_ALT
Автосменяющийся слайдер
Автор: /Cosmo+☭
скрин
Если хотите несколько слайдеров, присваивайте доп. классы
bb code
[div=shikiWrapper]
[div=shikiSlider_c]
[div=shikiSlider_s]
[div=shikiSlider_slide active]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[div=shikiSlider_slide]
[div=shikiSlider_slide_img][/div]
[div=shikiCaption]TEXT[/div]
[/div]
[/div][/div][/div]
css
.shikiWrapper {
    position: relative;
    display: inline-flex;
    width: calc(100% / 4);
    margin: -1px auto 2px;
    border-radius: 0.35rem;
    padding: 5px;
}
.shikiWrapper .shikiSlider_c, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img1 {
    padding-bottom: 55%;
}
.shikiWrapper .shikiSlider_c {
    position: relative;
    width: 100%;
    height: 0;
    left: 0.2px;
    overflow: hidden;
    border-radius: inherit;
    user-select: none;
    box-shadow: 0 2px 8px #00000033;
}
.shikiWrapper .shikiSlider_s {
    position: absolute;
    display: inline-flex;
    left: 0;
    top: 0;
    width: 100%;
    animation: slider 38s ease-in-out infinite;
    animation-fill-mode: forwards;
}
@keyframes slider {
  5%, 100% {
      left: 0;
  }
  10%, 15% {
      left: -100%;
  }
  20%, 25% {
      left: -200%;
  }
  30%, 35% {
      left: -300%;
  }
  40%, 45% {
      left: -400%;
  }
  50%, 55% {
      left: -500%;
  }
  60%, 65% {
      left: -600%;
  }
  70%, 75% {
      left: -700%;
  }
  80%, 85% {
      left: -800%;
  }
  90%, 95% {
      left: -900%;
  }
}
.shikiWrapper .shikiSlider_slide {
    position: relative;
    display: inherit;
    cursor: pointer;
    width: inherit;
    height: inherit;
}
.shikiWrapper .shikiSlider_slide .shikiSlider_slide_img, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img1 {
    width: 100vw;
}
.shikiWrapper .shikiSlider_slide .shikiCaption {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: flex-end;
    line-height: 2;
    font-size: 1.35em;
    color: #f0f8ff;
    z-index: 12;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf, 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf;
}
.shikiWrapper .shikiSlider_slide:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset;
}
.shikiWrapper .shikiSlider_s:hover, .shikiWrapper .shikiSlider_slide:hover {
  animation-play-state: paused !important;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(1) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(2) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(3) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(4) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(5) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(6) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(7) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(8) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(9) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
.shikiWrapper .shikiSlider_slide:nth-of-type(10) .shikiSlider_slide_img {
    background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover;
}
Ответы

Нет комментариев

назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть