Blanks space between images in slider - php

Question

I am making a dynamic slider with laravel. I need to slide content and image that are in database. Everything is well but I have a gap(white space) between the slides. The first image slides with content, second is blank and after sometime third image slides and after third image there is blank page slide.
I have two images in database and in folder. The image should slides frequently one after another but this is not happening.
I may have a mistake in my if else statement.
my html code for slider is like this,it works well
<section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="bnr-img">
<img src="css/images/banner.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Group com Family Hospitalization<br> Insurance
</div>
</div>
<h1>"We will be there when you need us most"</h1>
</div>
<div class="item">
<div class="bnr-img">
<img src="css/images/bnr-medi.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Health Insurance
</div>
</div>
<h1>"Securing Your Health"</h1>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="prev">
<img src="css/images/arw-left.png" class="img-responsive">
</a>
<a class="right carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="next">
<img src="css/images/arw-right.png" class="img-responsive">
</a>
</div>
</section><!--Slider end-->
my code for dynamic slider is like this:
<h2>services</h2>
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner inner" role="listbox">
#if(isset($services))
#foreach($services as $service)
<div class="item active">
</div>
<div class="item">
<div class="col-md-4">
<img src="frontend/services/{{$service->image}}">
</div>
<div class="col-md-8">
<p>
<span class="hilights2">{{$service->title}}</span><br>
{{$service->description}}
Read More
</p>
</div>
</div>
#endforeach
#endif
</div>
<!-- Controls -->

Answer 1

Most likely you have some unwanted margin on one of your elements. Try right clicking and hitting inspect element to see which element is taking up the whitespace, and then using css to set margin:0;

Answer 2

I have had the same problem,
when i figured the solution it was I've css file with code
.next,.prev{
display: none !important;
}
Regards