图像不显示在 css/jquery 滑块中

发布于 2024-11-04 21:25:14 字数 1500 浏览 7 评论 0原文

我设置了 12 个 div,用于通过数据库调用动态显示缩略图和一些文本。它们自行显示在页面下方,没问题... div+边框、缩略图、文本。

然后,我尝试将这些“框”放入水平滑块中,以便访问者可以在感兴趣的情况下滚动浏览它们。

我的问题是,缩略图不会显示...div/框显示正常,文本也显示正常,但图像不显示?

img 标签绝对是正确的,所以我想我需要向其中一个 div 添加一个显示或 z-index 标签,但我现在正在绕圈。

请问有什么建议吗? (我使用的是easyslider 1.7)

HTML:

<div id="samplesales">
<div id="samplecontent">
<div id="slider">
<ul>
<li><div class=sample>
      <img src='..path/to/photo'>
      Photo description text ...
    </div>
</li>
  ....
<li><div class=sample> another photo etc </div></li>
</ul>
</div></div></div>

CSS

#samplesales{margin:0 auto;position:relative;text-align:left;width:650px;}
#samplecontent{position:relative;}

#slider ul, #slider li,
#slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
    }

#slider2{margin-top:1em;}

#slider li, #slider2 li{ 
width:650px;
height:220px;
overflow:hidden; 
    margin:auto;
    display: block;
}

div.sample {
    display:block;
    border: solid 1px #0066CC;
    margin:6px; 
    padding: 15px 20px 15px 20px;
    font-size: 14px;
    font-family: courier;
    min-height: 170px;
    vertical-text-align:middle;
    float:left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 4px 4px 5px #ccc;
    -webkit-box-shadow: 4px 4px 5px #ccc;
    -moz-box-shadow: 4px 4px 5px #ccc;
    }

I've got 12 divs set to display a thumbnail and some text dynamically from a database call. On their own they display down the page, no problem ... div+border, thumbnail, text.

I'm then trying to put those 'boxes' into a horizontal slider, so the visitor can scroll through them if interested.

My problem is, the thumbnails won't display ... the div/box shows up OK, as does the text, but the images don't show?

The img tag is definitely correct, so I'm thinking I need to add a display or z-index tag to one of the divs, but I'm going round in circles at the moment.

Any suggestions please? ( I'm using easyslider 1.7 )

HTML:

<div id="samplesales">
<div id="samplecontent">
<div id="slider">
<ul>
<li><div class=sample>
      <img src='..path/to/photo'>
      Photo description text ...
    </div>
</li>
  ....
<li><div class=sample> another photo etc </div></li>
</ul>
</div></div></div>

CSS

#samplesales{margin:0 auto;position:relative;text-align:left;width:650px;}
#samplecontent{position:relative;}

#slider ul, #slider li,
#slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
    }

#slider2{margin-top:1em;}

#slider li, #slider2 li{ 
width:650px;
height:220px;
overflow:hidden; 
    margin:auto;
    display: block;
}

div.sample {
    display:block;
    border: solid 1px #0066CC;
    margin:6px; 
    padding: 15px 20px 15px 20px;
    font-size: 14px;
    font-family: courier;
    min-height: 170px;
    vertical-text-align:middle;
    float:left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 4px 4px 5px #ccc;
    -webkit-box-shadow: 4px 4px 5px #ccc;
    -moz-box-shadow: 4px 4px 5px #ccc;
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一抹淡然 2024-11-11 21:25:14

尝试删除溢出:隐藏到溢出:可见!重要不能建议 mucj 此时它可能会溢出

try removing overflow:hidden to overflow:visible !important can't suggest mucj at this point it would probably overflow

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文