bootstrap Carousel questions - html

Question

1) I use the carousel-thumbnails class. Somehow my thumbnails all align to the left side and on top of each other. How can I get them to align center one after another.
2)
I don't want to see the dots that indicate which photo is showing because I have the thumbnails, How can I get rid of them?
I just want to show 5 thumbnails although there are more photo's in my directory. How can I program it that as soon as I go to photo 4 he loads photo 6 and display in the thumbnails photo 2-6.
I tried hidden-xs in the class="carousel-indicators". That didn't work. But I think when it works it will also remove my thumbnails.
<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner"role="listbox">
<div class="item active">
<img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;">
<div class="carousel-caption">
<h3>test</h3>
<p>Info tekst</p>
</div>
</div>
<div class="item">
<img src="/fotos/visinstukjes.jpg" alt="vis" style="width:80%;">
<div class="carousel-caption">
<h3>Vis</h3>
<p>In stukjes of zoiets</p>
</div>
</div>
<div class="item">
<img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;">
</div>
<div class="item">
<img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;">
</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>
<!--/.Controls-->
<ol class="carousel-indicators" >
<li data-target="#carousel-thumb" data-slide-to="0" class="active">
<img src="/fotos/auto.jpg" width="100">
</li>
<li data-target="#carousel-thumb" data-slide-to="1">
<img src="/fotos/visinstukjes.jpg" width="100">
</li>
<li data-target="#carousel-thumb" data-slide-to="2">
<img src="/fotos/robot.jpg" width="100">
</li>
<li data-target="#carousel-thumb" data-slide-to="2">
<img src="/fotos/vrachtwagen.jpg" width="100">
</li>
</ol>
</div>

Answer 1

use this code:
.mystyle{
background-image: url('bg.png');
width: 100px !important;
height: 100px !important;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<div id="myCarousel" class="carousel slide carousel-thumbnails" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner"role="listbox">
<div class="item active">
<img src="bg.png" alt="Los Angeles" style="width:80%;margin:0 auto">
<div class="carousel-caption">
<h3>test</h3>
<p>Info tekst</p>
</div>
</div>
<div class="item">
<img src="bg.png" alt="vis" style="width:80%;;margin:0 auto">
<div class="carousel-caption">
<h3>Vis</h3>
<p>In stukjes of zoiets</p>
</div>
</div>
<div class="item">
<img src="bg.png" alt="Chicago" style="width:80%;;margin:0 auto">
</div>
<div class="item">
<img src="bg.png" alt="New york" style="width:80%;;margin:0 auto">
</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>
<!--/.Controls-->
<ol class="carousel-indicators" >
<li data-target="#carousel-thumb" data-slide-to="0" class="active mystyle"></li>
<li data-target="#carousel-thumb" data-slide-to="1" class="mystyle"></li>
<li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
<li data-target="#carousel-thumb" data-slide-to="2" class="mystyle"></li>
</ol>
</div>