Question

在我的PHP项目主页滑块图像中正确显示，同时添加带图像滑块的图像说明。这一切都来自所有图像

这里我附上了代码：

<div class="container-fluid">
    <div id="zoom-slider">
        <?php foreach($slider_image as $slider ){?>
        <div>
            <img src="<?php echo base_url();?>admin/assets/upload/<?php echo $slider['image_name']; ?>" alt="" />
            <div class="bannertext" style="right:10%;top:20%;color:#ffffff;">
                <h3><?php echo $slider['image_description']; ?></h3>
            </div>
        </div>
        <?php }?>

    </div>
</div>

Css风格：

.bannertext{width: 50%;position:absolute;z-index:999; text-align: right;}
.bannertext h3{font-size: 50px; color: #FFFFFF; font-weight: bold; text-shadow: 3px 2px 1px rgba(12, 21, 30, 0.5); }

此处添加了Zoom Slider css

    canvas{
    width: 100% !important;
}
#zoom-slider {
    width:100% !important;
    height: 510px;/* Make it smaller than your images for zooming effect */
    overflow:hidden;
    position:absolute;
    top: 0px;
    z-index: -1
}

#zoom-slider img {
    position:absolute;
    display:none;
    top:0px;
    z-index:1;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
}

.rmm{
    max-width: 100% !important;
}


div.zs-caption-bg {
    background:#000;/*Caption background color. Can be defined as semi-transparent through the javascript slideshowOptions setting.*/
    border-radius: 5px;
    border:1px solid #CCCCCC;
}
div.zs-caption {
    font:bold 17px/19px Verdana, Arial;
    color:White;
    z-index:7;
    text-align:center;/* When captionEffect was set to rotate through javascript, and setting "text-align:left" will create a fly-in effect, and setting "text-align:center" will get the rotate effect. */
    overflow:hidden;
}
div.zs-caption a {
    color:#09F;
}



div.navBulletsWrapper  {
    background: none;
    position: absolute;
    z-index: 9999999;
    bottom: 50px;
    cursor: pointer;
    right: 200px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
}


div.navBulletsWrapper div 
{
    width:12px;
    height:12px;
    background:transparent url(../images/bullets.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin:12px 10px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -12px;}



#zoom-slider img
{
    transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

Answer 1

更改

 <?php foreach($slider_image as $slider ){?>
        <div>

到

<?php foreach($slider_image as $slider ){?>
            <div style="position:relative">

动态图像和描述无法正确显示

1 个答案: