Я работаю с каруселью Bootstrap 3. Вот что я сделал далеко, я хочу, чтобы это выглядело примерно так.
Почему предварительный просмотр слайда из столбца 2 каждый раз, когда я нажимаю стрелки? Есть ли способ скрыть предварительный просмотр от отображения при нажатии на следующий / предыдущий
Каждый раз, когда я нажимаю на два слайда, он выдает ошибку и не возвращается к первому слайду.
<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>