Search code examples
javascriptjqueryhtmlcssjcarousel

jCarousel vertical scrolling not working


$(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>

The ul container is showing the calculated style change in top position but the content of the carousel doesnt scroll. Please help. This is the jCarousel Version. Here is my Codepen. Just need this one last piece of vertical scroll to work.


Solution

  • Its not scrolling because you are missing this CSS:

    .jcarousel ul {
        position: relative;
    }
    

    If you look at the DOM inspector it is applying top and left styling but nothing is moving. Thats because the styling is applied to the ul but it needs position: relative. You will need to play with your heights and stuff a little more now that it scrolls to get the effect you want but now you should start seeing what expect.

    EDIT: Sorry I missed that you clearly stated you saw the styling being applied already. Either way add the above CSS and it should start working.