плагин цикла jquery принимает ширину: 100% и присваивает ей левый стиль на опции scrollHorz - PullRequest
Новая
       12

плагин цикла jquery принимает ширину: 100% и присваивает ей левый стиль на опции scrollHorz

1 голос
/ 12 августа 2011

Я делаю слайд-шоу, которое работает с адаптивным макетом.После нескольких часов работы слайд-шоу теперь реагирует на макет, но из-за ширины, составляющей 100%, опция fn: 'scrollHorz' работает неправильно.Потому что ширина: 100% присваивается классу left: style.Итак, мой вопрос, как я могу заставить это работать.Я был бы очень признателен за любую помощь.

Это моя разметка 

<div id="test">
     <section>
        <img src="images/sliderContent_1.png" alt="Slide 1" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
</div>

Это моя CSS 

section {
  margin: 0;
}
img {
   max-width: 100%;
}
img.loading {
   margin-bottom: 2em;
   visibility: hidden;
}

#page-wrapper-test {
   width: 100%;
   margin: 0 auto;
}
#test {
   width: 100%;
}
div.loading {
   width: 100%;
}
#test section { width: 100%; }

, и это мой сценарий 

  $(document).ready(function() {
     $('#test').prepend('<img class="loading" src="images/loading.gif" />');
     $('#test').after('<div id="nav" class="nav">');
     $('#test').cycle({
             slideExpr: 'section',
             fx:     'scrollHorz',
             timeout: 0,
             pager:  '#nav',
             next:   '#test',
             slideResize: true,
             containerResize: false,
             width: '100%',
             fit: 1,
         });
    });

Ответы [ 3 ]

1 голос
/ 12 ноября 2012

Вы пытались установить slideResize на false?Таким образом, плагин цикла не меняет ваш css props.

Не работает с шириной 100%

У меня была такая же проблема, но с scrollVert и это решило проблему.

0 голосов
/ 06 ноября 2012

Цикл делает следующий дочерний уровень элементов ниже родительского контейнера слайд-шоу слайдами. В вашем примере <section>.

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

0 голосов
/ 19 сентября 2011

Вам нужно установить свойство высоты для вашего цикла jQuery. С scrollHorz есть странное поведение. Я бы посоветовал вам использовать scrollLeft вместо этого. Но тогда вам нужно будет установить пользовательскую функцию для пейджера, чтобы scrollRight при необходимости.
Вот как должен выглядеть ваш фрагмент JS: 

$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 1000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "100px",
    fit: 1,
});

Вот как вы можете использовать пользовательские функции для своего пейджера: 

var $test = $('#test');

$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 2000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "200px",
    fit: 1,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;

        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }

        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    },
    pageAnchorBuilder: function(idx, slide) {
        return '<a href="#">' + idx + 'a</a>';
    }
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
    var idx = $navChildren.index(this);
    if (idx < slideIndex) {
        $test.cycle( idx, 'scrollRight' );
    }
    else if (idx > slideIndex) {
        $test.cycle( idx );
    }
    e.preventDefault();
});

Проверьте это здесь:
http://jsfiddle.net/vfonic/uTpqB/

...