Я столкнулся с проблемой, связанной с использованием ползунка SlidesJS для сайта WordPress с несколькими слайд-шоу, загружаемыми через ajax на одну и ту же страницу (не запущенную одновременно) со значением AutoHeight. Мне удалось заставить AutoHeight работать по выбору, и он действительно работает, он просто не работает с первым изображением слайд-шоу. Первое изображение не появляется при первой загрузке. При нажатии кнопки «Далее» или ожидании, пока слайд-шоу не выполнит это автоматически, все работает с другими изображениями.

Я думаю, это потому, что когда слайдер впервые загружает, высота равна 0 ?!

Я не могу использовать фиксированную высоту CSS для ползунка, я попытался использовать значение max-height, которое не сработало, таким образом, для ползунка он получит откат на фиксированной высоте. Высота авто в CSS не работает так же очевидно. Кто-нибудь знает способ обойти эту проблему? Это только первое изображение, которое загружается неправильно.

Я вставлю CSS и Javascript из кода ниже

 initializePortSlider=function(){
    if($().slides) {

        var portSliderPreloader = $('#portfolio-slider').attr('data-loader');

        $("#portfolio-slider").slides({
            preload: true,
            preloadImage: portSliderPreloader,
            play: 5000,
            pause: 2500,
            hoverPause: true,
            autoHeight: true, 
            container: 'portfolio-slider-wrap',
            effect: 'fade',
            next: 'gallery-next',
            prev: 'gallery-prev',
            crossfade: true,
            generatePagination: false
        });

    }
    };
    initializePortSlider();

CSS для слайдера

#portfolio-slider {
position: relative;
width: 588px;
line-height: 1;
padding-top:10px;
padding-bottom:10px;}

#portfolio-slider .portfolio-slider-wrap {
position: relative;
width: 588px;}

.portfolio-slider-wrap a,
.portfolio-slider-wrap img {
display: block;
width: 588px;
height:auto;}
2
user1756847 27 Янв 2013 в 12:16

2 ответа

Лучший ответ

Если я правильно понял, когда слайд-шоу загружается, только первое изображение получает высоту 0.

Вы можете исправить это несколькими способами:

CSS :

.portfolio-slider-wrap img:first-child {
   height: auto or 100%;
}

Если это не сработает, вы можете сделать это способом javascript:

$('.portfolio-slider-wrap').find('img').each(function(i, obj){
  if (obj.clientHeight <= 0){
      obj.style.height = obj.offsetParent.clientHeight + 'px';
  }
});

Добавьте этот код сразу после начала показа слайдов.

0
Villi Katrih 27 Янв 2013 в 13:00

Вам нужно установить высоту слайдера на высоту изображения на каждом свитке. Это решение сработало для меня.

#slides - это идентификатор div, который я использую, где размещены все img.

// other option for slidesjs,

callback: {
          loaded: function(number) {
            // Use your browser console to view log
       jQuery('#slides').height(jQuery('.slidesjs-control img:nth-child(1)').height());
            console.log('SlidesJS: Loaded with slide #' + number);
          },
          start: function(number) {
            // Use your browser console to view log
            console.log('SlidesJS: Start Animation on slide #' + number);
          },
          complete: function(number) {
            // Use your browser console to view log
            console.log('SlidesJS: Animation Complete. Current slide is #' + number);
  jQuery('#slides').height(jQuery('.slidesjs-control img:nth-child('+number+')').height());
          }
0
Hunter 8 Сен 2016 в 14:13