unslider не действует отзывчивый

Question

В настоящее время я использую unlider, и он не реагирует на моем сайте. Я не совсем уверен, почему он не реагирует, потому что я настроил его как жидкость.

код ниже:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://unslider.com/unslider.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('.banner').unslider({ 
      speed: 600, //Speed in milliseconds 
      delay: 4000, // To delay between slide (in milliseconds 
      keys: true, 
      fluid: true, 
      dots: true 

      }); 
     }); 
</script> 

мне нужно сделать что-то в моем файле CSS или мне нужно, чтобы мои изображения в%

Спасибо делать!

Ниже HTML:

<div class="banner"> 
    <ul =" col span_6_of_6"> 
     <li><img src='Images/farmimg1.jpg' width="1000" height="577" alt= "Farm Photo"></li>   
     <li><img src = "Images/tunisewefield.jpg" width="1000" height= "577" alt= "Tunis Ewe in field"></li> 
     <li><img src = "Images/barnsimg.jpg"width="1000" height= "577" alt= "Wise Family Sheep Farm"></li> 
     <li><img src= "Images/sheepfield.jpg" width= "1000" height = "577" alt= "Sheep in Field"></li> 
    </ul> 
</div> 

Answer 1

Как сказал, что другие ребята, лучше всего было бы удалить ширину и высоту от встроенных изображений. Мое предложение сохранять отзывчивость изображений было бы добавлением отзывчивого класса к каждому изображению. Что-то вроде этого:

<li><img class="img-resposive" src='Images/farmimg1.jpg' alt= "Farm Photo"></li> 

в то время как IMG-resposive будет выглядеть так:

.img-resposive{ 
    width: 100%; 
    height: auto; 
}