Изменение размера слайд-шоу img и замена js на css - PullRequest
Новая
       26

Изменение размера слайд-шоу img и замена js на css

0 голосов
/ 02 мая 2020

У меня есть слайд-шоу, которое отлично работает на больших экранах, но портится при уменьшении до размеров мобильных устройств. Я уверен, что это что-то в размере слайд-шоу и слайд-шоу IMG, но не могу понять это. Также у меня есть небольшой кусочек javascript, выполняющий переходы - возможно ли заменить просто css3 - автозапуск и переход с титрами? Спасибо за вашу помощь в ожидании.

HTML

    <div id="slideshow">
      <figure>
        <img class="img-responsive" src="/concrete5/themes/kohutapu/images/nads_karlos.jpg">
        <figcaption>
          <h3 class="white">Your Hosts</h3>
        </figcaption>
      </figure>
      <figure>
        <img src="/concrete5/themes/kohutapu/images/wharekai.jpg">
        <figcaption>
          <h3 class="white">Dining Experience</h3>
        </figcaption>
      </figure>
      <figure>
        <img src="/concrete5/themes/kohutapu/images/farm.jpg">
        <figcaption>
          <h3 class="white">Petting Zoo</h3>
        </figcaption>
      </figure>
      <figure>
        <img src="/concrete5/themes/kohutapu/images/farm.jpg">
        <figcaption>
          <h3 class="white">Learn the Crafts</h3>
        </figcaption>
      </figure>
    </div>

CSS

    #slideshow {
      font-family: "Roboto", sans-serif;
      margin: auto;
      overflow: hidden;
      position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
      width: 100%;
        min-width: 1980px !important;
      height: auto;
        min-height: 1250px;
        display: block;
    }
    #slideshow img {
      width: 100%;
        min-width: 1980px !important;
      height: auto;
        min-height: 1250px;
    }
    figure, figcaption {
      position: absolute;
    }
    figure:nth-child(1) {
      animation: nextSlide 16s 12s infinite;
    }
    figure:nth-child(2) {
      animation: nextSlide 16s 8s infinite;
    }
    figure:nth-child(3) {
      animation: nextSlide 16s 4s infinite;
    }
    figure:nth-child(4) {
      animation: nextSlide 16s 0s infinite;
    }
    figcaption {
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 0 10px;
     bottom: 140px;
      height: 100px;
      width: 100%;
        text-align: center;
    }
    .white {
        color: #fff;
    }

    h4 {
      line-height: 0.1em;
        color: #fff;
    }
    p {
      font-size: 100%;
      font-weight: 300;
        line-height: 1;
    }

    @keyframes nextSlide {
      0% {
        opacity: 1;
      }
      17% {
        opacity: 1;
      }
      25% {
        opacity: 0;
      }
      92% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @media screen and (max-width: 1024px){
        #slideshow {
              display: none;
    }

    @media screen and (max-width: 768px){
        #slideshow {
              display: none;
    }
    }
...