Карусель на основе Bootstrap 4 с текстом и изображением - PullRequest
Новая
       38

Карусель на основе Bootstrap 4 с текстом и изображением

0 голосов
/ 14 октября 2019

Привет, ребята, извините, если это уже спросили, не удалось найти ничего подходящего. У меня проблема в том, что код не работает правильно, как только он импортирован в WordPress. Вот код: https://codepen.io/barbarararara/pen/GRRZZqQ Консоль показывает ошибку в JS, но НЕТ ИДЕИ :( Любые идеи приветствуются 

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

<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>Document</title>
</head>

<body>
    <div class="">
        <div class="carousel">
            <div class="glide__track" data-glide-el="track">
              <div class="glide__slides">
                <div class="glide__slide slide slide-1">
                  <div class="container row mx-auto">
                    <div class="col-12 col-md-6 py-5">
                        <h1> Super header: buy this please</h1>
                        <ul>
                            <li> Because this </li>
                            <li> Because that </li>
                            <li> And that </li>
                            <li> And this too </li>
                       </ul>
                    </div>
                    <div class="col-12 col-md-6 py-5">
                        <img alt="really" src="https://miro.medium.com/max/455/1*snTXFElFuQLSFDnvZKJ6IA.png">
                    </div>
                  </div>
                </div>

                <div class="glide__slide slide slide-2">
                  <div class="container row mx-auto">
                    <div class="col-12 col-md-6 py-5">
                        <h1> Buy this too please</h1>
                        <ul>
                            <li> Because this </li>
                            <li> Because that </li>
                            <li> And that </li>
                            <li> And this too </li>
                       </ul>
                    </div>
                    <div class="col-12 col-md-6 py-5">
                        <img alt="really" src="https://miro.medium.com/max/455/1*snTXFElFuQLSFDnvZKJ6IA.png">
                    </div>
                  </div>
                </div>



            </div>

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

</html>

.slide {
  min-height: 450px;
  min-height: 100vh;
}

.carousel {
}

.slide-1 {
  background: red;
}

.slide-2 {
  background: green;
}

.slide-3 {
  background: blue;
}

.slide-4 {
  background: yellow;
}

.slide img {
  max-width: 100%;
}

const glide = new Glide('.carousel', {
  type: 'carousel',
  startAt: 0,
  perView: 1
}).mount()
...