jCarousel ALMOST works. Single CSS change? WordPress

• SOLVED

I've set up jCarousel from [[LINK href="http://sorgalla.com/projects/jcarousel/"]]this tutorial[[/LINK]] and it's almost working. You can view my example [[LINK href="http://psychfunk.com/wordpress/"]]here on the bottom right[[/LINK]] of the page (below where it says The Crate). If you inspect the area with FireBug, you can see that the ul id of "mycarousel" is 2740px wide and if you make a simple change within FireBug and bring it to 330px wide, everything falls in place and it works! Also, if I change the Javascript to make it scroll horizontally instead, I works fine as well. Only I've tried numerous attempts and nothing is working for me. Below is my pertinent code:

<strong>HTML</strong>

<div id="mycarousel" class="jcarousel-skin-tango nothere">
<div class="jcarousel-container jcarousel-container-vertical">
<div class="jcarousel-clip-vertical">

<ul id="mycarousel" class="jcarousel-skin-tango">
<?php
query_posts('post_type=review&showposts=8');
if (have_posts()):
$i = 1;
while (have_posts()):
the_post();
?>

<li class="jcarousel-item-<?php echo $i; ?>">
<div id="review-hp-wrap">
<p class="meta-category-black"><?php echo rw_get_the_term_list(null, 'location', false, ' ', ', ', ''); ?> ></a></p><br>
<div id="review-hp-thumb">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('review-hp'); ?></a>
</div> <!--END review-hp-thumb -->
<div id="review-hp-excerpt">
<h3><?php echo get_the_term_list( $post->ID, 'artist', '', ', ', ' ' ); ?></a></h3>
<h3 class="hp-album-title"><?php echo get_post_meta( $post->ID, '_ct_text_4d695a5b22b4f', true ); ?></h3>
<p>William dolor sit amet, consectetur adipiscing elit. Aliquam ectetur </p>
a
</div> <!--END review-hp-excerpt -->
</div> <!--END review-hp-wrap -->


<?php
endwhile;
endif;
?>

</li>
</ul>

<div class="jcarousel-scroll">
<a href="#" id="mycarousel-prev">&laquo; Prev</a>
<a href="#" id="mycarousel-next">Next &raquo;</a>
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
</div> <!--END jcarousel-scroll -->

</div> <!--jcarousel-clip-vertical -->
</div> <!--jcarousel-container-vertical-->
</div> <!-- END mycarousel -->


<strong>CSS</strong>:

.jcarousel-skin-tango .jcarousel-container {
height: 550px;
width: 330px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 330px;
padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
width: 330px;
height: 550px;
padding: 0px 0px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 330px;
height: 160px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 330px;
height: 600px;
}

/*issue here*/
.jcarousel-skin-tango .jcarousel-item {
width:330px;
height: 160px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;

}


I've also tried commenting out lines from the CSS that I though may be causing a problem.

Thanks, hope you guys can figure this one out. It's been driving me crazy!

Answers (2)

2011-03-30

Denzel Chia answers:

Hi,

Open up your style.css, go to the end and add the following css rule.

.jcarousel-list-vertical{
width:300px !important;
}


I had confirmed this in my firefox console, and by the way, I am using JCarousel for my home page at http://denzeldesigns.com.

Thanks.

---

Denzel Chia comments:

Attached screenshot as evidence of my fix.

Thanks.
Denzel