Probleme Slider Responsive

<!-- SLIDER -->
        <div class="container-fluid" id="slider">
            <div class="row" id="slides">
                <ul class="col-md-12 col-sm-12 lt" >
                    <li class="slide showing"></li>
                    <li class="slide"></li>
                    <li class="slide"></li>
                    <li class="slide"></li>
                    <li class="slide"></li>
                    <li class="slide"></li>
                </ul>
                <div class="buttons">
                    <button class="controls" id="previous"><</button>
                    <button class="controls" id="pause">❚❚</button>
                    <button class="controls" id="next">></button>
                </div>
            </div>
        </div>
        <!-- FIN SLIDER -->

/*-- Slider --*/
#slides{
    position: relative;
    height: 376px;
    padding: 0px;
    margin: 0px;
    width: 1400px;
}

.lt{
    list-style-type: none;
}

.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
    background-size: cover;
    transition: opacity 1s;
}

.showing{
    opacity: 1;
    z-index: 2;
}

#slider {
    width: 75%;
}

.controls{
    display: none;
    background: #f6f1f1b3;
    color: #000;
    border-radius: 20px;
    font-size: 25px;
    cursor: pointer;
    border: 2px solid #000;
    margin: 10px 0px 0px 10px;
    width: 60px;
}

.controls:hover, .controls:focus{
    background: #eee;
    color: #333;
}

.container-fluid{
    position: relative;
}

.buttons{
    position: absolute;
    left: 435px;
    bottom: 22px;
    z-index: 10;
    font-size: 0px;
}

.slide:nth-of-type(1){
    background-image: url('../img/slide1.jpg');
    width: 100%;
}

.slide:nth-of-type(2){
    background-image: url('../img/slide2.jpg');
    width: 100%;
}

.slide:nth-of-type(3){
    background-image: url('../img/slide3.jpg');
    width: 100%;
}

.slide:nth-of-type(4){
    background-image: url('../img/slide4.jpg');
    width: 100%;
}

.slide:nth-of-type(5){
    background-image: url('../img/slide5.jpg');
    width: 100%;
}

.slide:nth-of-type(6){
    background-image: url('../img/slide6.jpg');
    width: 100%;
}

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
    controls[i].style.display = 'inline-block';
}

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);

function nextSlide(){
    goToSlide(currentSlide+1);
}

function previousSlide(){
    goToSlide(currentSlide-1);
}

function goToSlide(n){
    slides[currentSlide].className = 'slide';
    currentSlide = (n+slides.length)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = '►'; // play character
    playing = false;
    clearInterval(slideInterval);
}

function playSlideshow(){
    pauseButton.innerHTML = '❚❚'; // pause character
    playing = true;
    slideInterval = setInterval(nextSlide,5000);
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ playSlideshow(); }
};

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function(){
    pauseSlideshow();
    nextSlide();
};
previous.onclick = function(){
    pauseSlideshow();
    previousSlide();
};