Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
171 views
in Technique[技术] by (71.8m points)

html - Bootstrap Carousel other content than image

I want to use the twitter bootstrap carousel in a personal project. So far it works really well because I use the example of the bootstrap homepage.

Now I want to place simple html content instead of images there. This content should then rotate same way as the pictures. The text I put in is shown in the carousel-caption and text I put in the carousel caption is not being displayed.

Example:

    <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>

Is there a way to get this work? Perhaps theres is a way to declare a white span with say 300 x 300 px where i can place some content.

You should know that I at a beginner level. I am now learning html, css, js, mongodb, bootstrap, node.js. But this is a little to much for me now.

many thanks Daniel

question from:https://stackoverflow.com/questions/11914716/bootstrap-carousel-other-content-than-image

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
<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>

If you have replaced html/css from carousel and are not able to correct it, get back the original stuff. Then slowly start replacing with your code, and be very careful with the following css-attributes, they not only help to find errors (like the most useful css borders), but they also help to stop new content that is added, from bloating previous one (max width/height css attributes).

Pay close attention to the following css-attributes:

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

Do not modify the z-indexes and opacity first work with the ones I have given above and then start doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...