Могу ли я создать навигацию слайдера с переменной высотой для ее содержимого?

Question

Большинство людей хорошо знают эффект слайдера Coda в эти дни, но даже с поисковой системой и поиском здесь я не смог найти свой ответ.

Вопрос Как я могу создать навигацию в стиле Coda Slider, который использует горизонтальное скольжение/прокрутка но adaptes свою высоту во время скольжения анимации на высоту, необходимую для содержания?

Например, у первого «слайда» есть только изображение (ширина 400 пикселей, высота 300 пикселей), но на следующем слайде имеется много информации, включая изображения, текст и видеоизображение с шириной 400 пикселей и высотой 800 пикселей. Теперь создание контейнера высотой 800 пикселей для начала - это просто пустая трата пространства для слайда 1, поэтому мне нужно динамически основываться на высоте, необходимой для содержимого отдельного слайда, чтобы изменить высоту контейнера слайда.

Возможно ли это? Возможно, там есть учебник, и один из вас мог бы указать мне на это.

С точки зрения технологии я вполне адаптируюсь на xHTML и CSS, но только любитель в jQuery и PHP. Хотя это не должно быть ограничением на ваш ответ, пожалуйста, имейте это в виду при объяснении вещей.

Спасибо большое за чтение, Я с нетерпением жду ваших идей, решений и общего ввода.

Jannis

Answer 1

Я недавно свернул свой. Вот (надеюсь) полезная стартовая точка.

Вот код для моей «следующей кнопки».

var canSlide = true; 
$('.next').bind('click', function() { 



      if (!canSlide) { return false } // prevent queuing up of multiple clicks 

      $('.prev').fadeIn(500); 

      canSlide = false; 

      $('.testimonials-container').animate({ left: '-=1011px' }, 1000, function() { canSlide = true });    

      if (currentPane == totalPanes) { 

       $('.next').fadeOut(500); 
       canScroll = false; 

      } else { 
       currentPane++; 


      } 

Чтобы настроить его на высоту, вы просто добавили высоту в аргумент JSON для анимации. Такие, как

.animate({left: '-=1011px', height: newHeight + 'px'}) 

И, конечно, вам понадобится JavaScript, чтобы определить, какая должна быть следующая высота!