Вертикалното превъртане на jCarousel не работи

$(function() {
 $('.jcarousel')
				.jcarousel({
					auto: 1,
					animation: {
						duration: 3000,
						easing:   'linear',
					},
					vertical: true,
					wrap: 'last'
			}).jcarouselAutoscroll({
					interval: 3000,
					target: '+=1',
					autostart: true
				});
});
ul li {
  list-style-type: none;
}

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 88px;
}

.jcarousel li {
    float: left;
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.4/jquery.jcarousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="jcarousel">
    <ul>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
    </ul>
  </div>
</div>

Ul контейнерът показва изчислената промяна на стила в горна позиция, но съдържанието на въртележката не се превърта. Моля помогнете. Това е версията на jCarousel. Ето моят Codepen. Трябва само това последно парче вертикално превъртане, за да работи.


person alphapilgrim    schedule 14.01.2016    source източник


Отговори (1)


Не превърта, защото ви липсва този CSS:

.jcarousel ul {
    position: relative;
}

Ако погледнете DOM инспектора, той прилага top и left стил, но нищо не се движи. Това е така, защото стилът е приложен към ul, но се нуждае от position: relative. Ще трябва да си поиграете с височините и нещата малко повече сега, когато се превърта, за да получите ефекта, който искате, но сега трябва да започнете да виждате какво очаквате.

РЕДАКТИРАНЕ: Съжалявам, че съм пропуснал, че ясно сте заявили, че сте видели стила да се прилага вече. Във всеки случай добавете горния CSS и той трябва да започне да работи.

person AtheistP3ace    schedule 14.01.2016
comment
Радвам се да помогна! Късмет! - person AtheistP3ace; 15.01.2016