Как изменить размер слайдера javascript

Question

Я пытаюсь изменить размер слайдера моего содержимого в течение последних 2 часов и все равно не повезло.

Так вот что я имею в верхней части моего HTML документа:

<script> 
    $(function() { 
     $('#slides').slidesjs({ 
      width: 1500, 
      height: 350, 
      play: { 
       active: true, 
       auto: true, 
       interval: 4000, 
       swap: true 
      } 
     }); 
    }); 
</script> 

здесь, где я вставить изображение в HTML и контейнер: CSS:

.container { 
    margin-top:0px; 
    margin-left:250px; 
    -webkit-filter: grayscale(100%); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease;  
} 
.container:hover{ 
    -webkit-filter: grayscale(0%); 
} 

Html:

<div class="container"> 
    <div id="slides" >  
     <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a> 
     <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a> 
    </div> 
</div> 

Увеличение ширины по какой-либо причине снижает высоту, и ничто не является d один до ширины! Я очень смущен! пожалуйста, помогите, спасибо!

Answer 1

Этот слайдер использует загрузчик и некоторые средства массовой информации запросы и работать как адаптивный слайдер. это хорошая особенность. вы найдете полные примеры in this package

, чтобы изменить необходимый размер в дополнение к настройкам конфигурации слайдера ... вам нужно изменить контейнер .container в разных медиа-запросах.

Например, в строке 143 стандартного примера вы найдете этот размер:

.container { 
    width: 1170px 
    } 

вы можете изменить на:

.container { 
    width: 100% 
    } 

здесь есть целые размеры .. вы найдете встроенный в HTML

/* For tablets & smart phones */ 
@media (max-width: 767px) { 
    body { 
    padding-left: 20px; 
    padding-right: 20px; 
    } 
    .container { 
    width: auto 
    } 
} 

/* For smartphones */ 
@media (max-width: 480px) { 
    .container { 
    width: auto 
    } 
} 

/* For smaller displays like laptops */ 
@media (min-width: 768px) and (max-width: 979px) { 
    .container { 
    width: 724px 
    } 
} 

/* For larger displays */ 
@media (min-width: 1200px) { 
    .container { 
    width: 100% 
    } 
} 

Answer 2

Вы не закрыли свои теги img.

<a href="timetablenotts.html"><img src="img/timetableNotts.png" </a> 

Должно быть:

<a href="timetablenotts.html"><img src="img/timetableNotts.png" /></a>