jQuery cycle2 с неправильным переходом для якорных слайдов

Первый раз работаю с jquery cycle2. Прекрасно работает, когда мои слайды являются изображениями, но когда мои слайды являются якорями, он не использует эффект перехода scrollHorz, который я указал. Вместо этого переход вырастает из правого верхнего угла якоря.

В приведенном ниже коде первое слайд-шоу работает как положено, во втором слайд-шоу эффект перехода имеет какой-то неизвестный тип (не scrollHorz).

<div class="page">

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <img src="../Images/top-mod1.png" />
        <img src="../Images/top-mod2.png" />
        <img src="../Images/top-mod3.png" />
        <img src="../Images/top-mod4.png" />
    </div>

    <div class="cycle-slideshow" 
        data-cycle-slides="a"
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <a href="http://www.google.com"><img src="../Images/top-mod1.png" /></a>
        <a href="http://www.yahoo.com"><img src="../Images/top-mod2.png" /></a>
        <a href="http://www.facebook.com"><img src="../Images/top-mod3.png" /></a>
        <a href="http://www.weather.com"><img src="../Images/top-mod4.png" /></a>
    </div>

</div>

jquery jquery-cycle2
person g2000t    schedule 08.11.2013    source источник
comment
Я думаю, что это ошибка в цикле 2. Возникает проблема, если внутри слайда указанного типа есть изображения (в данном случае якоря). Если привязки содержат контент, не являющийся изображением, то переходы ведут себя так, как ожидалось.   -  person g2000t    schedule 09.11.2013

Ответы (3)


arrow_upward
1
arrow_downward

У меня была такая же проблема, и я смог исправить ее с помощью CSS, указав ширину и высоту тегов привязки следующим образом:

.cycle-slideshow a { 
    display: block; 
    width: 635px; 
    height: 345px;
}

Обязательно измените ширину и высоту в соответствии с размерами вашего изображения.

Надеюсь, это поможет!

person Vimo Designs    schedule 08.12.2013

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой, используя div, и исправление заключалось в том, чтобы использовать CSS для установки ширины слайдов div на 100%, что избавляет вас от необходимости устанавливать определенные размеры.

person MindPalette    schedule 24.05.2014

arrow_upward
0
arrow_downward

Исправлено, мы ищем отзывчивое слайд-шоу, поэтому:

установите ширину и высоту изображений в html для слайдов следующим образом:

<a href="YOUR LINK ADDRESS">
    <img src="images/portfolio_1.jpg" width="100%" height="auto" >
</a>

CSS работал со следующим:

.cycle-slideshow a{
width: 100%;
height: auto;
}

Я надеюсь, что это работает для вас!

person Colin Eatherton    schedule 23.12.2014