Проблема с добавлением компонента Карусель Bootstrap - PullRequest
Новая
       38

Проблема с добавлением компонента Карусель Bootstrap

0 голосов
/ 20 января 2019

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

Я выбрал пример из Bootstrap, который имеет первый DIV, id = "carouselExampleSlidesOnly", с этим идентификатором карусель работает отлично.

Но я хочу удалить «carouselExampleSlidesOnly» и изменить его на другое имя. Когда я делаю это, меняя на «myCarousel», код перестает работать.

Я попытался добавить код javascript с именем идентификатора, но даже при этом карусель не работает и показывает статическое изображение. 

<script>
$('#myCarousel').carousel({
  interval: 3000,
  pause: null,
})
</script>

   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

1 Ответ

0 голосов
/ 20 января 2019

Я полагаю, что у вас проблема с 

$('#myCarousel').carousel({
  interval: 3000,
  pause: null,
})

Вы передаете значение NULL в качестве параметра, когда он ожидает строку или логическое значение, вы можете увидеть эту ошибку из консоли.

enter image description here

(Ctrl + Shift + I) в Chrome

Это должно быть 

$('#myCarousel').carousel({
  interval: 3000,
  pause: false,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
...