Javascript-форум - Показать сообщение отдельно

Cdelphi78 · #1 (**permalink**) 21.12.2015, 10:19

Здравствуйте! Значит в сладере заадаптивил каритинки они теперь резиновые, но проблема в том что слайдер при этом остался статичным, то есть подключаю скрипт слайдера вся резиновость картинок пропадает, при уменьшении страницы картинки не уменьшаются, прямо не знаю что делать, никаких зацепок нет?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script>
var slideWidth = 980,
    sliderTimer, currentSlide = 0, len;

function nextSlide() {
    currentSlide++;
    if (currentSlide >= len) currentSlide = 0;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}

function prevSlide() {
    currentSlide--;
    if (currentSlide < 0) currentSlide = len - 1;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
$(function() {
    len = $(".slidewrapper").children().length
    $(".slidewrapper").width(len * slideWidth);
    sliderTimer = setInterval(nextSlide, 3000);
    $("#slider").on({
        mouseenter: function() {
            clearInterval(sliderTimer)
        },
        mouseleave: function() {
            sliderTimer = setInterval(nextSlide, 3000)
        }
    });
    $("#next_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        nextSlide()
    });
    $("#prev_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        prevSlide()
    })
});
</script>

    <style>
   #slider  {
    max-width:973px;
    height: auto;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(75, 77, 97,0.6);
}


.clearfix {
    width:100%;
    height: auto;
    display: block;
}

 .slidewrapper{
    position: absolute;
    max-width:3000px;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;  
     
}

#slider li > .img-responsive {
    width:100%;
    height:auto;
    display: block;
}

.slidewrapper .slide {
    float:left;
    list-style-type: none;
    max-width:977px;
}





#slider .arrows {
    top:50%;
}



#slider #prev_slide {
    z-index: 10000;
    position: absolute;
    left:0;
    margin-top:-25px;
}


#slider #next_slide {
    z-index: 10000;
    position: absolute;
    right:0;
    margin-top:-25px;
}

.fa-arrow-circle-left,.fa-arrow-circle-right {
    background: #000;
    font-size: 50px !important;
    opacity: 0.5;
    border-radius: 50%;
}

.fa:hover {
    opacity: 1;
    
}



    </style>
 </head>
<body>
    <div id="slider">
           <ul class="slidewrapper" data-current="0">
              
               <li class="slide"><img class="img-responsive" src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
               <li class="slide"><img class="img-responsive" src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
               <li class="slide"><img class="img-responsive" src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
               
           </ul>
 <a href="javascript: void(0)" id="prev_slide" class="arrows"><i class="fa fa-arrow-circle-left"></i></a>          
<a href="javascript: void(0)" id="next_slide" class="arrows"><i class="fa fa-arrow-circle-right"></i></a>
<img src="img/cl_fix.png" alt="clear" class="clearfix">
           
           </div>
</body>
</html>