PDA

View Full Version : Sliding Carousel Issue



jcdesigns
06-16-2011, 02:16 AM
I used jQuery & jCarousel to create a sliding carousel. My images are cut off and I tried to edit the css and html code so the image would appear but have not been able to figure this out. Please let me know how I can fix this. Thanks

Here are the html, css and image links for your reference.

http://www.jenkinscreativedesigns.com/aboutusppjcarousel.html

http://www.jenkinscreativedesigns.com/skin.css

http://www.jenkinscreativedesigns.com/Images/Aboutuscarousel1.jpg
http://www.jenkinscreativedesigns.com/Images/Aboutuscarousel2.jpg

jscheuer1
06-16-2011, 07:10 AM
In skin.css find:


.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 194px;

}

.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 75px;
height: 245px;

}

.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 194px;
}

Edit the highlighted lines as shown.

jcdesigns
06-16-2011, 08:53 PM
That worked perfectly. Thank you very much.

jcdesigns
07-07-2011, 01:31 PM
Hello,

I was able to get the images in the sliding carousel to view properly but I have 3 images I need to show and the carousel only shows two. It shows the first and last image bypassing the 2nd image one when you click on the arrows. Someone please let me know how this can be corrected.

Here are the html, css and image links for your reference. Thanks

http://www.jenkinscreativedesigns.co...jcarousel.html

http://www.jenkinscreativedesigns.com/skin.css

http://www.jenkinscreativedesigns.com/Images/CarouselImagesweb2.jpg
http://www.jenkinscreativedesigns.com/Images/CarouselImagesgraphics.jpg
http://www.jenkinscreativedesigns.com/Images/CarouselImagesmarketing.jpg

jscheuer1
07-07-2011, 02:26 PM
That's not a css issue. It's the default scroll configuration of 3. In the .jcarousel() function one needs to specify scroll, otherwise it defaults to 3 (from the page's source code, additions highlighted):


<script type="text/javascript">

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 1,
scroll: 1
});
});

</script>

Don't miss the added comma (red).

See:

http://sorgalla.com/projects/jcarousel/#Configuration

for more information on configuring the scroller.

jcdesigns
07-07-2011, 04:38 PM
Once again thanks for the feedback and quick response. It works great. You are truly an asset to this forum.