<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- To disable autoplay, delete the "data-ride" attribute -->
<section class="container">
<div id="carousel" class="carousel slide">
<div class="row">
<div class="carousel-inner" role="listbox" data-ride="carousel">
<div class="item active">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel finibus mi. Cras sapien arcu, elementum at volutpat et, elementum a tortor. Donec iaculis turpis neque, at interdum justo posuere eu. Nam nec lectus venenatis, placerat dolor ornare, bibendum est. Etiam vulputate eget augue et placerat. Donec posuere velit vitae ligula tempor interdum a rutrum enim. Cras faucibus diam at ante scelerisque, eget mollis quam ultrices.
</p>
<p>
Etiam id porta justo. Proin quis metus sagittis, pulvinar urna non, aliquet nibh. Proin ornare risus elit, vel venenatis justo scelerisque vitae. Duis at efficitur lacus. Nam ut augue tincidunt, gravida est non, tempor purus. Mauris quis velit sed tortor auctor molestie ac non ligula. Quisque facilisis dui massa, vel ultricies nisl convallis ac. Aliquam scelerisque felis nunc, a rhoncus massa convallis vitae. Fusce commodo nunc quis aliquam facilisis. Integer pulvinar semper luctus. Etiam nec dictum nibh. Phasellus est augue, lacinia fringilla est et, consequat auctor urna. Fusce rutrum libero quis sagittis ullamcorper. Sed non rhoncus nibh.
</p>
</div>
<div class="col-md-6">
<img src="http://via.placeholder.com/800x600" class="img-responsive img-thumbnail">
</div>
</div><!-- /.row -->
</div><!-- item -->
</div><!-- /.carousel-iner -->
</div> <!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="banner-menu">
<ul class="list-inline">
<li data-target="#carousel" data-slide-to="0" class="active ">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 1">
</li>
<li data-target="#carousel" data-slide-to="1">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 2">
</li>
<li data-target="#carousel" data-slide-to="2" class="active ">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 3">
</li>
<li data-target="#carousel" data-slide-to="3">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 4">
</li>
<li data-target="#carousel" data-slide-to="4" class="active ">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 5">
</li>
<li data-target="#carousel" data-slide-to="5">
<img src="http://via.placeholder.com/100x100" class="img-thumbnail" alt="Slide 6">
</li>
</ul>
</div><!-- banner-menu -->
</div>
</div><!-- /.row -->
</div> <!-- /.carousel -->
</section>
.item {
margin: 30px 0;
}
.list-inline {
text-align: center;
}
.list-inline li {
list-style: none;
cursor: pointer;
margin-bottom: 5px;
}
@media (min-width: 970px) and (max-width: 1168px ) {
.item img {
margin-top: 55px;
}
}
