Bxslider "restart" bug

Question

I'm having a problem with a carousel i've implemented on a site : when going from the last photo to the first one,

• the sliders loops around all photos in the opposite of the usual direction

• after doing that, it flashes the one i started on before going to the first photo. here is the HTML :

    <div class="row" style="margin-top: 25px;">
        <div class="bxslider">
            <div><img src="img/diapo1.jpg"></div>
            <div><img src="img/diapo2.jpg"></div>
            <div><img src="img/diapo3.jpg"></div>
        </div>
    </div>
  

And here is the bxslider js :

  $(document).ready(function(){ $('.bxslider').bxSlider(); });

can anyone help me figure out what's wrong ? Thanks for helping.

EDIT :

I also have some CSS, to shape the bxslider viewport & images, maybe this cause the issue ??

.bx-wrapper, .bx-viewport, .bx-wrapper img {width: 1100px !important;}
.bx-wrapper, .bx-viewport{height: 450px !important}
.bx-wrapper .bx-controls-direction .bx-prev {
    left: 10px !important;
    background-position: auto;
    -webkit-transition: .4s;
    transition: .4s;
}
.bx-wrapper .bx-controls-direction .bx-next {
    right: 10px !important;
    background-position: auto;
    -webkit-transition: .4s;
    transition: .4s;
}
.bx-next:hover, .bx-prev:hover{
    opacity: 0.7;
}

Answer 1

use bxSlider options...

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  pager: true,
  slideWidth: 600
});

Read More about start/stop controls