Slide on Bootstrap 3 Carousel error

I’m needing some help with a Bootstrap 3 carousel

Here is what I have done far, I want it to look similar to this.

Why does the slide preview from column 2 anytime I click the arrows? Is there a way to hide the preview from showing up when clicking next/previous

Anytime I click past two slides, it errors out and doesn’t go back to the first slide. Any input would be appreciated.

<style type="text/css">
	/* #information, #video {
	    width: 50%;               //CSS styling for table tags.
	} */
	.linebreak { 
        display: none;
    }
    .image {
 		float: left!important;
	}
	.carousel slide {
		width: 400px;
	}
	.text {
		width: 45%!important;
		float: right!important;
		right: 14px!important;
		/* top: 10px!important; */
		margin-right: 35px!important;
		/* margin-top: 20px!important; */
	}
	.carousel-inner {
		overflow: visible;
    }
    .carousel img {
		border-radius: 0px;
		width: 140px;
		margin-right: 10px;
		margin-left: 80px;
	}
    .carousel-control active {
		position: fixed;
	}
	.carousel {
		margin-top: 40px;
	}
	.firstcolumn {
		width: 1000px;
}
	/*.video-container {
	/*position:relative;
	padding-bottom:315px;
	padding-top:10px; /* width: 100% ;* max-width: 500px; padding-right:0px;
	/*max-height:530px; overflow: auto;
	border: none;
	}
    .video-container img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-width: 500px;
	max-height:530px;
	height:100%;
	margin: 0px;*/
	/*}*/
	</style>
<div class="firstcolumn">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <!-- DIV 1 BEGIN -->
         <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
    <img class="image" src="https://www.evantage-technology.com/wp-content/uploads/2015/04/product_office365.jpg" alt="Los Angeles">
    <div class="text">Office 365 is the brand name Microsoft uses for a group of subscriptions that provide productivity software and related services.</div>
  </div>

    <div class="item">
      <img class="image" src="http://office365.ecolearning.eu/img/office_icos/delve-logo.png" alt="Chicago">
      <div class="text">Microsoft Office Delve is a data visualization and discovery tool that incorporates elements of social networking and machine learning with the search capability of the Microsoft Office 365 suite.</div>
    </div>
    
    <!-- <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div> -->

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-top: 50px">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-top: 50px">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</div> <!-- DIV 1 END -->
	<div class="secondcolumn">
       <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <center><h3>WHAT DO YOU WANT TO DO?</h3></center>
          <br/>
        <div class="row">
  			<div class="col-sm-6" align="center">.col-sm-3</div>
  			<div class="col-sm-6" align="center">.col-sm-6</div>
  		</div>
  		<div class="row">
  			<div class="col-sm-6" align="center">.col-sm-3</div>
  			<div class="col-sm-6" align="center">.col-sm-6</div>
  		</div>
  		</div>
		</div>
     </div>
   </div>

Its basically the overflow:visible you added that allows the next slide to be visible. You need to hide the overflow.

This is only rough but something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.linebreak {
	display: none;
}

.text {
	width: 45%;
	display:inline-block;
	vertical-align:middle;
}
.carousel img.image {
	border-radius: 0px;
	width: 140px;
	margin: 0 30px;
	display:inline-block;
	vertical-align:middle;
}
.carousel {
	margin-top: 40px;
}
.carousel-control.right, .carousel-control.left {
	background:none;
}
.carousel-indicators {
    bottom: -35px;
	background:blue;
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{right:5px;}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{left:5px;}
@media screen and (max-width:992px) {
	.carousel img.image {width:100px;height:auto;}
}
@media screen and (max-width:662px) {
	.carousel img.image {width:60%;display:block;margin:auto;}
	.text{display:block;width:auto;padding:20px;}
}


</style>
</head>
<body>
<div class="container">
  <div class="firstcolumn">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <!-- DIV 1 BEGIN -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active"> <img class="image" src="https://www.evantage-technology.com/wp-content/uploads/2015/04/product_office365.jpg" alt="Los Angeles">
              <div class="text">Office 365 is the brand name Microsoft uses for a group of subscriptions that provide productivity software and related services.</div>
            </div>
            <div class="item"> <img class="image" src="http://office365.ecolearning.eu/img/office_icos/delve-logo.png" alt="Chicago">
              <div class="text">Microsoft Office Delve is a data visualization and discovery tool that incorporates elements of social networking and machine learning with the search capability of the Microsoft Office 365 suite.</div>
            </div>
            
            <!-- <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div> --> 
            
            <!-- Left and right controls --> 
            <a class="left carousel-control" href="#myCarousel" data-slide="prev" > <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
        </div>
      </div>
      <!-- DIV 1 END -->
      <div class="secondcolumn">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <center>
            <h3>WHAT DO YOU WANT TO DO?</h3>
          </center>
          <br/>
          <div class="row">
            <div class="col-sm-6" align="center">.col-sm-3</div>
            <div class="col-sm-6" align="center">.col-sm-6</div>
          </div>
          <div class="row">
            <div class="col-sm-6" align="center">.col-sm-3</div>
            <div class="col-sm-6" align="center">.col-sm-6</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

You seem to be fighting the grid a little there with your fixed widths and columns. If using bootstrap then go with the defaults otherwise you may as well not use a grid at all.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.