I have created a carousel using Cycle2 Carousel and you can see it here:
http://jsfiddle.net/ktsixit/3BjHQ/
Notice two issues:
1) No matter what I do, the text inside h4 doesn't wrap.
2) Every time the carousel moves, the item that's sliding in isn't visible from the start, but gets visible after the slide animation is completed.
Can you help me fix these two issues?
Here's the HTML code:
<div class="carousel_container">
<div class="slideshow" data-cycle-fx="carousel" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-carousel-visible="2" data-cycle-next="#next" data-cycle-prev="#prev">
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach1.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach2.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach3.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach4.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach5.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach6.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach7.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="center"> <a href="#" id="prev"><< Prev </a>
<a href="#" id="next"> Next >> </a>
</div>
</div>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
And here's the css:
.sem_carousel_container {
width: 440px;
float: left;
}
.carousel_item {
width: 200px;
height: 250px;
float: left;
margin:10px;
background: #fff;
-webkit-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}