Question

在我的Slider中，每个幻灯片都有不同的动画，有些来自顶部，有些来自底部，依此类推。我希望图像来自数据库，具有不同的动画。代码将显示表格中的所有图像。

标题 - 图像标题
  位置 - 哪个位置图像显示（1到5）
  image_path - 显示存储在UploadImage中的图像路径   第二个滑块的标题未显示。

<?php 
include_once('connection.php');
$query1="SELECT * FROM slider";
$result1=mysqli_query($conn,$query1);
?>

我的滑码ID：如何显示具有不同动画的图像

 <ul> 
 <?php  $i=1;
        while($row=mysqli_fetch_object($result1))
        {echo $row->position; 
    ?>
    <li data-index="1" data-slotamount="7" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="600" data-rotate="0" data-saveperformance="off">
        <!-- MAIN IMAGE -->
        <img src="<?php echo "admin/UploadImage/".$row->image_path; ?>"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->
        <div class="tp-caption first_text" 
            data-width="none"
            data-height="none"
            data-whitespace="nowrap"
            data-voffset="['260']"
            data-hoffset="['40','120','40']"
            data-x="left" 
            data-y="top"
            data-fontsize="['48']" 
            data-lineheight="['55']" 
            data-transform_idle="o:1;"
            data-frames='[{"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"x:[-100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
            data-textAlign="['left','left','left','left']"
            data-paddingtop="[0,0,0,0]"
            data-paddingright="[0,0,0,0]"
            data-paddingbottom="[0,0,0,0]"
            data-paddingleft="[0,0,0,0]"
            data-start="800" 
            data-splitin="none" 
            data-splitout="none" 
            data-responsive_offset="on"> <?php echo $row->title; ?></span>
        </div>
        <div class="tp-caption download_btn"
            data-whitespace="nowrap"
            data-voffset="['390']"
            data-hoffset="['40','120','40']"
            data-x="left"
            data-transform_idle="o:1;"
            data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
            data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
            data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
            data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"  
            data-y="top"
            data-start="1800" >
            <a class="register_angkar_btn" href="#">Registration</a>
        </div>
    </li>
    <?php $i++; }?>
</ul>

Answer 1

我通过在li tag中添加此代码来解决我的问题：

 data-index="<?php echo $row->position;?>"

标题未显示为滑块中的第二个图像

1 个答案: