Отображение изображений под слайд-шоу - PullRequest
Новая
       77

Отображение изображений под слайд-шоу

0 голосов
/ 16 февраля 2019

Мне сложно объяснить, но я сделал демо здесь:

http://plnkr.co/edit/X0X4RAFjnUX7LzBL1R6p?p=preview

В основном у меня есть 2 столбца, которые расположены рядом.Когда страница становится меньше, столбцы переходят друг в друга.В одной из колонок есть плагин-слайдер, где меняется изображение.Обертка имеет относительное положение, поэтому она меняет размер.Изображения внутри используют абсолютную позицию для работы ползунка.

Под этими изображениями я хочу 3 отдельных изображения, которые всегда остаются под.К сожалению, я могу заставить их появляться только на основном изображении или под слоем (не расположенным ниже).

Вот весь код: 

    var timer = setInterval(nextImage, 4000);
    var curImage = 0;
    var numImages = 3;

    function nextImage() {
      var e;
      // remove showMe class from current image
      e = document.getElementById("slideimg" + curImage);
      removeClass(e, "showMe");

      // compute next image
      curImage++;
      if (curImage > numImages - 1) {
        curImage = 0;
      }

      // add showMe class to next image
      e = document.getElementById("slideimg" + curImage);
      addClass(e, "showMe");
    }

    function addClass(elem, name) {
      var c = elem.className;
      if (c) c += " "; // if not blank, add a space separator
      c += name;
      elem.className = c;
    }

    function removeClass(elem, name) {
      var c = elem.className;
      elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks
    }
    body,
    html {
      height: 100%
    }

    body {
      min-height: 100%;
      background-position: center;
      background-size: cover;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      margin: 0;
    }

    #content {
      max-width: 1750px;
      margin-left: auto;
      margin-right: auto;
    }

    * {
      box-sizing: border-box;
    }
    /* Create two equal columns that floats next to each other */

    .column {
      float: left;
      width: 50%;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }
    /* Clear floats after the columns */

    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

    @media screen and (max-width: 900px) {
      .column {
        width: 100%;
      }
    }

    .homepage-main-img-wrapper {
      position: relative;
      right: 0;
      left: 0;
      margin: auto;
      height: 100%;
    }

    .homepage-main-img {
      width: 100%;
      border: 2px solid #194d98;
      outline: 2px solid #0c7d5f;
    }

    .slide {
      border: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
    }

    .showMe {
      opacity: 1;
    }
<html lang="et" xml:lang="et">
<body>
  <div id="container">
    <div id="content">
      <div class="row">
        <div class="column" style="background-color:#aaa;">
          <div>stuff</div>
        </div>
        <div class="column container2">
          <div class="homepage-main-img-wrapper">
            <img id="slideimg0" class="slide homepage-main-img showMe" src="https://i.imgur.com/n3oGBvR.jpg">
            <img id="slideimg1" class="slide homepage-main-img" src="https://i.imgur.com/Ak7Ykl8.jpg">
            <img id="slideimg2" class="slide homepage-main-img" src="https://i.imgur.com/tSmA8zP.jpg">
          </div>
          <div id="test" style="
    position: relative;
">
            <div id="instagram-feed" class="instagram_feed">
              <div class="instagram_gallery">
                <img src="https://i.imgur.com/aoaWgFY.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                <img src="https://i.imgur.com/41i7fue.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                <img src="https://i.imgur.com/ITSAyjN.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>


</body>

</html>

1 Ответ

0 голосов
/ 17 февраля 2019

Поскольку высота изображений изменяется при изменении размера браузера, вы можете взять существующее изображение или прозрачное изображение с тем же классом "homepage-main-img", чтобы при изменении размера браузера масштаб был одинаковым.

Я также удалил позицию: относительный из вашего div тестового идентификатора.

Измените ваш HTML, чтобы он был следующим в блоке HTML.JS и CSS остаются нетронутыми.Просто добавлено, чтобы сниппит работал. 

var timer = setInterval(nextImage, 4000);
    var curImage = 0;
    var numImages = 3;

    function nextImage() {
      var e;
      // remove showMe class from current image
      e = document.getElementById("slideimg" + curImage);
      removeClass(e, "showMe");

      // compute next image
      curImage++;
      if (curImage > numImages - 1) {
        curImage = 0;
      }

      // add showMe class to next image
      e = document.getElementById("slideimg" + curImage);
      addClass(e, "showMe");
    }

    function addClass(elem, name) {
      var c = elem.className;
      if (c) c += " "; // if not blank, add a space separator
      c += name;
      elem.className = c;
    }

    function removeClass(elem, name) {
      var c = elem.className;
      elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks
    }
 body,
    html {
      height: 100%
    }

    body {
      min-height: 100%;
      background-position: center;
      background-size: cover;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      margin: 0;
    }

    #content {
      max-width: 1750px;
      margin-left: auto;
      margin-right: auto;
    }

    * {
      box-sizing: border-box;
    }
    /* Create two equal columns that floats next to each other */

    .column {
      float: left;
      width: 50%;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }
    /* Clear floats after the columns */

    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

    @media screen and (max-width: 900px) {
      .column {
        width: 100%;
      }
    }

    .homepage-main-img-wrapper {
      position: relative;
      right: 0;
      left: 0;
      margin: auto;
      height: 100%;
    }

    .homepage-main-img {
      width: 100%;
      border: 2px solid #194d98;
      outline: 2px solid #0c7d5f;
    }

    .slide {
      border: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
    }

    .showMe {
      opacity: 1;
    }
<div id="container">
      <div id="content">
        <div class="row">
          <div class="column" style="background-color:#aaa;">
            <div>stuff</div>
          </div>
          <div class="column container2">
            <div class="homepage-main-img-wrapper">
              <img id="slideimg0" class="slide homepage-main-img showMe" src="https://i.imgur.com/n3oGBvR.jpg">
              <img id="slideimg1" class="slide homepage-main-img" src="https://i.imgur.com/Ak7Ykl8.jpg">
              <img id="slideimg2" class="slide homepage-main-img" src="https://i.imgur.com/tSmA8zP.jpg">
            </div>
            <div id="test"><img id="fakeslide" class="homepage-main-img" src="https://i.imgur.com/n3oGBvR.jpg">
              <div id="instagram-feed" class="instagram_feed">
                <div class="instagram_gallery">
                  <img src="https://i.imgur.com/aoaWgFY.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                  <img src="https://i.imgur.com/41i7fue.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                  <img src="https://i.imgur.com/ITSAyjN.jpg" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
...