Как переделать код под мои требования?

Question

[OstapO]

Добрый день!
Есть такой пример кода: "Пример"
Как этот пример, переделать для col-md-4, то есть для случая 3 слайдов ?
Что нужно изменить в css&js ?

Answer 1

[Евгений]

А параметр itemsPerSlide не пробовали менять с 4 на 3? Ну естестна сетку поменять на col-md-4

Comments

[OstapO]

если сделать как Вы говорите

[Евгений]

OstapO, Залейте страницу эту и стили с библиотами архивом куда-нибудь. Я скачаю гляну

Answer 2

[sHARek]

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Comments

[OstapO]

==============

Такой баг в конце слайдов

[sHARek]

Ссылка есть?

[OstapO]

sHARek, нету, на локалке делаю

[sHARek]

Ну так наверно в верстке баг у вас? На www.codeply.com там где итог вашей верстки, внизу слево, нажмите на стрелку, откроется окно, там все работает.

[sHARek]

<div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>

И var itemsPerSlide = 3;

Не работает?

[OstapO]

sHARek, я знаю что для случая 4 слайдов работает
но не корректно работает для случая 3 слайдов

[OstapO]

sHARek,

[sHARek]

OstapO, попробуйте по развлекаться с шириной картинок, с шириной блока в котором находится...трудно сказать что там у вас без ссылки....если на www.codeply.com работает, а на локалке нет, соответственно ищите у себя.

[OstapO]

sHARek, окей
спасибо