Как мне оформить эту bootstrap карусель? - PullRequest
Новая
       1

Как мне оформить эту bootstrap карусель?

0 голосов
/ 02 апреля 2020

У меня есть эта bootstrap карусель (v4), и я хочу изменить ее стиль, в основном ее поля. Я на самом деле скрываю основную часть карусели и сохраняю миниатюры только потому, что хочу в итоге получить нечто вроде слайдера.

Однако я не знаю, как избавиться от всего пространства вокруг него (было бы неплохо заполнить несколько пикселей ...). Кроме того, как мне сделать большие картинки, пожалуйста?

Большое спасибо 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Carousel</title>

    <!--jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style>
body {
    background-color: #CACACA
}

.container {
    margin-top: 100px;
    margin-bottom: 100px
}

.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}
  </style>
</head>
<body style="margin:0; padding:0;">


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" align="center">
                <!-- slides -->
                <div class="carousel-inner" style="display: none;">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>

              <!-- Thumbnails -->
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<script>

$(document).ready(function () {
  $('#custCarousel').on('slide.bs.carousel', function (e) {
    console.log('Showing picture ' + e.to)
  });
});
</script>
</body>
</html>

1 Ответ

1 голос
/ 02 апреля 2020

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

Сами миниатюры могут быть больше, если вы измените их на что-то большее, чем 100px: 

#custCarousel .carousel-indicators>li {
    width: 100px
}

Чтобы сдвинуть миниатюры влево и из середины, вам нужно сделать что-то вроде этого: 

.carousel-indicators {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...