如何在jCarousel中更改图像宽度？ [英] how do i change image width in jCarousel?

问题描述

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

上面是我使用的轮播应用程序（目前更流行的开源软件之一），我不知道如何更改默认图像宽度，因为我有一打或所以图片，所有的像素宽度为170px，但目前的设置似乎设置在大约80px，这使得所有的图像重叠，我该如何改变这？有没有办法添加一些边距？我尝试改变jcarousel / skins / tango / skin.css中的css，但显然，即使我删除了css文件中的一切，旋转木马页面上没有任何影响 - 当我删除链接旋转木马停止运作，变成一个宽

Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.

推荐答案

该旋转木马使用< img> 标签，这意味着您必须在标记中指定每个宽度，如下所示：

That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:

< img src =...height =...width =170/>

CSS文件，像这样：

or use the img selector in the CSS file, something like this:

.jcarousel-skin-tango .jcarousel-item-horizontal img {
    width: 170px;
}

无论如何，你还必须使转盘容器足够宽容纳其内容。你可以给包含ul一些大宽度（多余会被隐藏），如：

Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:

ul#carousel {
   width: 99999px;
}

旋转木马会停在最后一张图片，知道你有足够的空间来容纳你有很多的照片，并防止重叠。

The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.

这篇关于如何在jCarousel中更改图像宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！