Проблема изменения размера слайдшоу цикла jQuery

Question

На этой странице у меня есть заставка в середине, ширина которой составляет 100%, и она поворачивает графические изображения каждые 8 ​​секунд.

У меня есть 3 div внутри этого слайд-шоу. Основной div содержит слайд-шоу, внутренний div имеет фоновое изображение повторителя, а внутренний div имеет градиентное изображение.

Задача 1. Когда вы пытаетесь уменьшить размер браузера .... содержимое веб-сайта корректируется и смещается на левую сторону ..... однако содержимое моего слайд-шоу не ... в настоящее время нет содержания, но вы можете увидеть это по черной рамке. Слайд-шоу остается в середине.

Как мне решить эту проблему?

Задача 2. Как только браузер становится меньше по ширине, и вы загружаете эту страницу .... слайд-шоу отображается в центре. Теперь разверните браузер до максимума, вы увидите, потому что слайд-шоу было отображено на меньшем экране ... оно оставит пустое пространство по бокам и размер не изменится с помощью браузера.

Я ударился головой об это, поэтому любая помощь и предложение приветствуются.

Answer 1

Я никогда раньше не использовал jquery.cycle, но он регулирует вашу ширину в зависимости от начальной ширины браузера при рендеринге. При изменении размера браузера эти ширины также не регулируются, что является причиной вашей конечной проблемы.

При просмотре вашего CSS кажется, что вы пытаетесь установить ширину 100% непосредственно для этих элементов (это не влияет, поскольку jquery.cycle применяет ширину непосредственно к элементу, переопределяющему его). Немедленное решение заключается в указании важного сразу после вашей ширины элементов div в вашем CSS (при условии, что элементы используют ваш CSS напрямую).

Например (давайте возьмем первый синий div):

.fadein {
   width: 100% !important
}

.hd_splash_container_blue {
   width: 100% !important
   poisition: relative;
}

.main_blue {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

Это позволит вам успешно изменить размер браузера, сохранив содержимое по центру по желанию.

Я мог бы предложить применить ваш CSS на более высоком уровне, поскольку единственное изменение между каждым высоким уровнем - это изображение (что можно сделать, как сейчас). Возьмите остаток CSS и примените его на высоком уровне:

.hd_splash_container {
   width: 100% !important
   poisition: relative;
}

.main_color {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

Answer 2

Я полагаю, что тот же самый эффект может быть фактически достигнут при использовании нативных опций плагина Cycle.Попробуйте добавить эти правила следующим образом:

$('#slides').cycle({ 
  resizeContainer: false,
  slideResize: false
});