Проблема с каруселью при динамической загрузке изображения - PullRequest
Новая
       16

Проблема с каруселью при динамической загрузке изображения

0 голосов
/ 22 октября 2018

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

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">First Event</h3>
                        <p>This is our first event.</p>
                    </div>
                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Second Event</h3>
                    <p>This is our second event.</p>
                </div>

                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Third Event</h3>
                    <p>This is our third event.</p>
                </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

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

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">


                {{#each events}}
                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">{{title}}</h3>
                        <p>{{description}}</p>
                    </div>
                </div>
                {{/each}}



            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

Когда я загружаю таким образом, изображения отображаются в виде блоков один за другим вместо карусели.

these are two different images loading from backend

Я могу видеть эти изображения, но не как карусель.Я имею в виду, что я получаю изображения из серверной части, но они не отображаются хорошо.Для любезной информации я использовал узел js и руль в качестве механизма шаблонов.

Что здесь не так?Я новичок в узле и извините, если это был простой вопрос.

1 Ответ

0 голосов
/ 25 октября 2018

Класс active включен во все слайды, поэтому все они видны.Прежде всего, удалите класс active в слайдах, и с помощью jQuery вы можете:$('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/Это добавит класс active для первого найденного узла .carousel-item.Надеюсь, это помогло.Приветствия.

...