Блог

Главная - Вопросы по программированию - Боковое шоу только с использованием CSS

Боковое шоу только с использованием CSS

#css

Вопрос:

Поэтому я создаю слайд-шоу только с помощью CSS, но сталкиваюсь с двумя основными проблемами, и любая помощь будет признательна!

  1. Я хотел бы добавить текст внутри изображения, например, несколько слов, объясняющих, что это за изображение, но я не уверен, как это сделать, несмотря на мои попытки
  2. По какой-то причине последний слайд обрезается. Есть идеи, почему?

HTML

 <html>
<head>
<link rel="stylesheet" href="style3.css">
</head>
<body>

<div class="fling-minislide">
    <img src="20190417_011307.jpg" alt="Slide 10" />
    <img src="20190417_203230.jpg" alt="Slide 9" />
    <img src="20190420_121746.jpg" alt="Slide 8" />
    <img src="20190428_174640.jpg" alt="Slide 7" />
    <img src="20200103_142544.jpg" alt="Slide 6" />
    <img src="20200104_142904.jpg" alt="Slide 5" />
    <img src="20200411_135421.jpg" alt="Slide 4" />
    <img src="20201016_132909.jpg" alt="Slide 3" />
    <img src="20201225_070106.jpg" alt="Slide 2" />
    <img src="20210416_193029.jpg" alt="Slide 1" />
    
  </div>
</body>
</html>

CSS

 .fling-minislide {width:350px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 46s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(10){animation-delay:0s;}
.fling-minislide img:nth-child(9){animation-delay:5s;}
.fling-minislide img:nth-child(8){animation-delay:10s;}
.fling-minislide img:nth-child(7){animation-delay:15s;}
.fling-minislide img:nth-child(6){animation-delay:20s;}
.fling-minislide img:nth-child(5){animation-delay:25s;}
.fling-minislide img:nth-child(4){animation-delay:30s;}
.fling-minislide img:nth-child(3){animation-delay:35s;}
.fling-minislide img:nth-child(2){animation-delay:40s;}
.fling-minislide img:nth-child(1){animation-delay:45s;}

Комментарии:

1. почему бы не обернуть изображение и текст в div?

2. Просто чтобы уточнить, у меня было бы 10 разных div (всего 20, открывающихся и закрывающихся) для каждой картинки?

Ответ №1:

  1. Вы должны включить все теги img в тег div, как это.
 <div class="box">
  <img src="20190417_011307.jpg" alt="Animation Picture">
  <div class="text">
                    <h1>some text</h1>
                </div>
            </div>
  1. Что касается ключевого кадра, вы должны установить время анимации равным 55 секундам. Тогда все работает нормально. Причина, по которой я рекомендую время анимации равным 55 сек, заключается в том, что продолжительность должна быть больше времени задержки. Если нет, анимация будет происходить неправильно.

Комментарии:

1. Я попробовал ваше предложение, но, возможно, я делаю это неправильно. Пожалуйста, смотрите ниже о том, что я пробовал, и дайте мне знать, если то, что я делаю, неправильно

Ответ №2:

 <div class="fling-minislide">
<img src="20210416_193029 .jpg" alt="Slide 10" >
<div class="text">
                  <h1>some text</h1>
              </div>
          </div>
<div class="fling-minislide">
<img src="20210416_193029 .jpg" alt="Slide 10" >
<div class="text">
                  <h1>some text</h1>
              </div>
          </div>

Комментарии:

1. Это был всего лишь пример на блоках кодирования. Я действительно изменил слайд и картинку

2. я думаю, что вы должны применять анимацию к каждому div, а не к img. поэтому вы исправляете css.

Метки: