БЛОГ НА HUSL


Как сделать модальные окна слайдами слайдера

Автор вопроса: Oleg Chornyi

У меня есть блоки и в них есть модальные окна, и я хочу что бы модальные окна перелистывались. Но, сейчас они не перелистываются. Как мне это исправить?

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Gravity</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    h1 {
      color: red!important;
    }
    
    body {
      font-family: 'Fira', sans-serif;
      font-size: var(--norm-size);
      font-weight: 400;
      background-color: #fff;
      color: #000;
    }
    
    a {
      text-decoration: none;
      color: #000;
    }
    
    img {
      max-width: 100%;
    }
    
    .slider__item {
      text-align: center;
      display: flex;
      align-items: center;
      width: 200px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #000;
      margin: 5px;
    }
    
    .sim-slider {
      max-width: 1000px;
      min-width: 320px;
      margin: 20px auto;
      padding: 30px 50px;
      border: 1px solid #ccd;
      background-color: white;
    }
    /* General styles */
    
    .sim-slider {
      position: relative;
    }
    
    .sim-slider-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
      position: relative;
    }
    
    .sim-slider-element {
      width: 50%;
      transition: opacity 1s ease-in;
      opacity: 0;
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      display: block;
    }
    
    .sim-slider-element img {
      position: absolute;
      z-index: -30;
    }
    /* Navigation item styles */
    
    div.sim-slider-arrow-left,
    div.sim-slider-arrow-right {
      width: 22px;
      height: 40px;
      position: absolute;
      cursor: pointer;
      opacity: 0.6;
      z-index: 100;
    }
    
    div.sim-slider-arrow-left {
      left: 10px;
      top: 40%;
      display: block;
      background: url("http://pvbk.spb.ru/inc/slider/sim-files/sim-arrow-left.png") no-repeat;
    }
    
    div.sim-slider-arrow-right {
      right: 10px;
      top: 40%;
      display: block;
      background: url("http://pvbk.spb.ru/inc/slider/sim-files/sim-arrow-right.png") no-repeat;
    }
    
    div.sim-slider-arrow-left:hover {
      opacity: 1.0;
    }
    
    div.sim-slider-arrow-right:hover {
      opacity: 1.0;
    }
    
    div.sim-slider-dots {
      width: 100%;
      height: auto;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 3;
      text-align: center;
    }
    
    span.sim-dot {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      padding: 0;
      display: inline-block;
      background-color: #BBB;
      border-radius: 5px;
      cursor: pointer;
    }
    /* Кнопки next & previous*/
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      z-index: 100;
    }
    /* Измените положение "next button" */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* Добавьте черный фоновый цвет с небольшой прозрачностью*/
    
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    /* Подпись под изображением */
    
    .text {
      color: #ffffff;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #ffffff;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* Точки/маркеры/указатели */
    
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #999999;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active,
    .dot:hover {
      background-color: #111111;
    }
    /* Выцветание анимации */
    
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    /* Для маленьких экранов увеличьте размер текста */
    
    @media only screen and (max-width: 300px) {
      .prev,
      .next,
      .text {
        font-size: 11px
      }
    }
    
    .modalDialog {
      position: absolute;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 99999;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      display: none;
      pointer-events: none;
      z-index: -1;
    }
    
    .modalDialog:nth-child(2n+1) {
      z-index: 2;
    }
    
    .modalDialog1 {
      position: absolute;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 99999;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      display: none;
      pointer-events: none;
      z-index: -1;
    }
    
    .modalDialog2 {
      position: ;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 99999;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      display: none;
      pointer-events: none;
      z-index: -3;
    }
    
    .modalDialog:target {
      display: block;
      pointer-events: auto;
    }
    
    .modalDialog>div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: #fff;
      background: -moz-linear-gradient(#fff, #999);
      background: -webkit-linear-gradient(#fff, #999);
      background: -o-linear-gradient(#fff, #999);
    }
    
    .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
    }
    
    .close:hover {
      background: #00d9ff;
    }
  </style>
</head>

<body>

  <div class="slider__item"><a href="#openModal">Открыть модальное окно1</a></div>
  <div class="slider__item"><a href="#openModal1">Открыть модальное окно2</a></div>
  <div class="slider__item"><a href="#openModal2">Открыть модальное окно3</a></div>

  <div class="slideshow-container">

    <div class="mySlides fade">
      <div id="openModal" class="modalDialog">
        <div>
          <a href="#close" title="Закрыть" class="close">X</a>
          <h2>Модальное окно1</h2>
          <p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
          <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
        </div>
      </div>
    </div>
    <div class="mySlides fade">
      <div id="openModal1" class="modalDialog">
        <div>
          <a href="#close" title="Закрыть" class="close">X</a>
          <h2>Модальное окно2</h2>
          <p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
          <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
        </div>
      </div>
    </div>
    <div class="mySlides fade">
      <div id="openModal2" class="modalDialog">
        <div>
          <a href="#close" title="Закрыть" class="close">X</a>
          <h2>Модальное окно3</h2>
          <p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
          <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
        </div>
      </div>
    </div>


  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="main.js"></script>
  <script>
    // слайдер
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "block";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
    }
  </script>
</body>

</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.