CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
caxinaswin
caxinaswin

Reputation: 71

Bootstrap carrousel left with dynamic text at right

im trying to do some kind of news feed and i want the carrousel to include a image and a text, the image should be displayed at the left side, and the text at the right like this:

what i want

at this moment i already made a lot of changes and i dont know what to do to display it like i want, here is the image that shows my current work:

what i have atm

here is my code:

<html>
<head>
    <title></title>
</head>
<body>
    <div class="row spacing2">
        <h3 id="Noticias">Notícias</h3>
        <div class="col-md-12">
            <div class="carousel slide spacing2" data-ride="carousel" id="carousel" style="width: 400px; margin-left:100px">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel"></li>
                    <li data-slide-to="1" data-target="#carousel"></li>
                    <li data-slide-to="2" data-target="#carousel"></li>
                </ol><!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img alt="..." class="pull-left" src="slider/scrum.jpg"> <span class="pull-right">Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of Greece, also being the closest one to the continent. It is the perfect getaway for holidays during summer, a place where you can relax and enjoy your holidays, forget about all your worries on a quiet sandy beach, but also a place where you can explore the Greek way of life, try the best foods and meet the most amazing people.</span>
                    </div>
                    <div class="item"><img alt="..." src="slider/scrum.jpg"></div>
                    <div class="item"><img alt="..." src="slider/scrum.jpg"></div>
                </div><!-- Controls -->
                 <a class="left carousel-control" data-slide="prev" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
            </div>
        </div>
        <div class="col-md-6" id="carousel_text">
            <div>
                <p></p>
            </div>
        </div>
    </div>
</body>
</html>

PS: sorry about my bad english, and the paint skills :D

Upvotes: 0

Views: 8615

Answers (1)

Plycoder
Plycoder

Reputation: 726

Update your carousel items html structure as following hopefully that should resolve your issue: 

<div class="item active">
  <div class="col-md-8 col-sm-8 col-xs-8">
    <img alt="..." class="pull-right" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQs8gHxXxlSYqXQficLOI-N0ibkh0XX97-0vYgakpSb3y9zTFpIOg">          
  </div>
   <div class="col-md-4 col-sm-4 col-xs-4">
   <span class="pull-right">
   Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of Greece, also being the closest one to the continent.
     </span>
     </div>
 </div>

Or follow demo scripts:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="row spacing2">
        <h3 id="Noticias">Notícias</h3>
        <div class="col-md-12">
            <div class="carousel slide spacing2" data-ride="carousel" id="carousel" style="width: 400px; margin-left:100px">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel"></li>
                    <li data-slide-to="1" data-target="#carousel"></li>
                    <li data-slide-to="2" data-target="#carousel"></li>
                </ol><!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
          
          <div class="item active">
         <div class="col-md-8 col-sm-8 col-xs-8">
          <img  alt="..." class="pull-right max-img-width" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQs8gHxXxlSYqXQficLOI-N0ibkh0XX97-0vYgakpSb3y9zTFpIOg">      
          </div>
     <div class="col-md-4 col-sm-4 col-xs-4">
       <span class="pull-right">
       Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of Greece, also being the closest one to the continent.
         </span>
          </div>           
            
         </div>  
            
        <div class="item">
          <div class="col-md-8 col-sm-8 col-xs-8">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU55m5PgXoLiEGWOl5a3aPIF4SQMiM-mYcIhg4-ac1YcrO0gTI" alt="Flower" >
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4">
       <span class="pull-right">
        The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).
         </span>
         </div>
      </div>

      
                
                </div><!-- Controls -->
                 <a class="left carousel-control" data-slide="prev" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
            </div>
        </div>
        <div class="col-md-6" id="carousel_text">
            <div>
                <p></p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions