Bootstrap Карусель другое содержание, чем изображение

Я хочу использовать карусель twitter bootstrap в личном проекте. Пока это работает очень хорошо, потому что я использую пример начальной загрузочной страницы.

Теперь я хочу разместить простой контент html вместо изображений. Затем это содержимое должно вращаться так же, как изображения. Текст, который я вставляю, показан в заголовке карусели, и текст, который я помещал в подпись карусели, не отображается.

Пример:

    <div class="item">
        This is the text or html code i want to place
        <div class="carousel-caption">
            <h4>Thumbnail label</h4>
            <p>Carousel caption text<p>
        </div>
    </div>

Есть ли способ получить эту работу? Возможно, theres - это способ объявить белый диапазон, скажем 300 x 300 пикселей, где я могу разместить некоторый контент.

Вы должны знать, что я на начальном уровне. Теперь я изучаю html, css, js, mongodb, bootstrap, node.js. Но сейчас это немного для меня.

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

Ответы

Ответ 1

<head>
  <style type="text/css">
    div.new_html_code {
      width:150px;
      height:100px;
      min-width:150px;
      min-height:100px;
      max-width:200px;
      max-height:100px;
      overflow:hidden;
      display:block;
      border:1px solid red;
    }
  </style>
</head>
<body>
<!--
some html stuff here, I am just giving the basic layout
-->
    <div class="item">
        <div class="new_html_code"></div>
        <div class="carousel-caption">
            <h4>Thumbnail label</h4>
            <p>Carousel caption text<p>
        </div>
    </div>
</body>

Если вы заменили html/css из карусели и не можете ее исправить, верните оригинал. Затем медленно начинайте заменять своим кодом и будьте очень осторожны со следующими css-атрибутами, они не только помогают находить ошибки (например, самые полезные границы css), но также помогают остановить добавление нового контента, от вздутия предыдущего один (максимальная ширина/высота css-атрибуты).

Обратите особое внимание на следующие css-атрибуты:

      min-width:150px;
      min-height:100px;
      max-width:200px;
      max-height:100px;
      overflow:hidden;
      border:1px solid red;

Не изменяйте первую работу z-indexes и opacity с теми, что я дал выше, а затем начинаем делать сложные вещи, спрашивайте еще раз, если у вас есть какие-то сомнения и извините за опечатки, у меня меньше времени.

Ответ 2

Класс carousel-caption плохо для вас. Не используйте его, если вы не хотите показывать фотографии, и все в порядке. Даже семантически неправильно определять ваш html-контент в качестве заголовка. Просто оставьте класс и используйте обычный div

<div>
    <h4>Thumbnail label</h4>
    <p>Carousel caption text<p>
</div>

Также эти гладкие тени исчезнут. И это хорошо, поскольку мы не хотим, чтобы они были на чистом тексте (хотя они могут выглядеть красиво на фотографиях).

Ответ 3

Вы не закрыли div carousel-caption. Вероятно, это ваша проблема. Если вы посмотрите на документацию карусели бутстрапа, нет никакого различия между использованием изображений или текста внутри каждого элемента.

<div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
   <div class="carousel-inner">
     <div class="active item"><p>1</p></div>
     <div class="item"><p>2</p></div>
     <div class="item"><p>3</p></div>
   </div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Посмотрите на поведение этого кода в jsfiddle: http://jsfiddle.net/QYFa2/

Ответ 4

@GLES существует очень простой способ использования карусели без изображения. На самом деле это свойство позиции заголовка. Carousel-caption. Просто установите его на статический

.carousel-caption { position:static; }

Вот демо для этого

Демо

Ответ 5

Rondell может быть плагином jQuery для отображения галерей и другого контента по вашему желанию.

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

Ответ 6

Просто удалить класс карусели, и все будет отлично