twitter-bootstrap PHP 与 Bootstrap 轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21386194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP with Bootstrap Carousel
提问by Ctrl_Alt_Defeat
Im trying to learn PHP and using it with the Bootstrap library for my site. I am looking to use the bootstrap carousel as seen here
我正在尝试学习 PHP 并将其与我网站的 Bootstrap 库一起使用。我正在寻找使用这里看到的引导轮播
What I am trying to achieve is the carousel with captions and the Machine Name I am showing in the picture would be a hyperlink that will take you to that page for more info. I have a MySQL database that contains the machine name and the ImagePath as to where it is located.
我想要实现的是带有标题的轮播，我在图片中显示的机器名称将是一个超链接，可将您带到该页面以获取更多信息。我有一个 MySQL 数据库，其中包含机器名称和关于它所在位置的 ImagePath。
So my code currently is as below -
所以我的代码目前如下 -
<?php
while($row = mysql_fetch_array($result))
{
?>
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<div>
<p>
Click the link above for more details about <?php echo $row['MachineName']>
</p>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<?php
}
mysql_close($connection);
?>
Currently instead of placing each image inside the carosuel this is creating a new carousel for each image down the page. Should the <carousel-example-captions>html be outside the while loop so it is created once and then the img tag will pick up the new image for each slide as you click the next > and prev < buttons.
目前，不是将每个图像放在 carosuel 中，而是为页面下方的每个图像创建一个新的轮播。如果该<carousel-example-captions>HTML是while循环外，使它一旦创建，然后当你点击Next>和prev <按钮img标签将搭载全新的形象为每张幻灯片。
Note also - <h3><?php echo $row['MachineName']?></h3>- I have not yet turned the header into a hyperlink as I wanted to get the carousel working correctly first.
另请注意<h3><?php echo $row['MachineName']?></h3>- 我还没有将标题变成超链接，因为我想让轮播首先正常工作。
回答by dagger2002
I recently added a carousel with a link from the mysql database. The issue is that you have the create new carousel code inside of the while statement. If you take it out and just have the new slide commands inside the while it will work perfect.
我最近添加了一个带有 mysql 数据库链接的轮播。问题是您在 while 语句中创建了新的轮播代码。如果您将其取出并在其中包含新的幻灯片命令，它将完美运行。
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row = mysql_fetch_array($result)){
?>
<div class="item<?php if($counter <= 1){echo " active"; } ?>">
<a href="">
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
</a>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<p>Click the link above for more details about <?php echo $row['MachineName']>; ?></p>
</div>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
If you get the number of rows from you mysql statement you can change the indicators section to have a loop that would allow for unlimited number of slides.
如果您从 mysql 语句中获得行数，您可以将指标部分更改为具有允许无限数量幻灯片的循环。
回答by Daniel J.
I find most carousel software, even that based on JQuery, too complicated to configure and maintain, that's why I created my own carousel that you can download here for free: https://33hops.com/php-html5-lightweight-slideshow-carousel.html
我发现大多数轮播软件，即使是基于 JQuery 的，配置和维护都太复杂了，这就是为什么我创建了自己的轮播软件，你可以在这里免费下载：https: //33hops.com/php-html5-lightweight-slideshow- carousel.html
The premises on top of which I programmed this are short and straight: I just wanted something that could automatically pick the images put in a given folder, preload them and cycle through them with a nice HTML5 transition effect and optionally texts overlayed on top. The result is an ultralight PHP carousel with an ultra low footprint ideal for mobile developments and easy maintenance, just change the images and reload.
我编程的前提是简短而直接的：我只是想要一些可以自动选择放置在给定文件夹中的图像，预加载它们并使用漂亮的 HTML5 过渡效果和可选的覆盖在顶部的文本循环浏览它们的东西。结果是一个超轻的 PHP 轮播，具有超低的占用空间，非常适合移动开发和易于维护，只需更改图像并重新加载。
回答by sowmya munagala sita
<div id="carousel-example-generic" class="carousel slide clearfix" data-ride="carousel">
<div class="carousel-inner">
<?php
$tmp_post = $post;
$query_args = array( 'suppress_filters' => false, 'post_type' => 'post' );
$slides = get_posts( $query_args );
if ( ! empty( $slides ) ) {
$counter = 0;
foreach( $slides as $post ) { setup_postdata( $post ); $counter++;
?>
<div class="item<?php if ($counter == 1) echo ' active'; ?>">
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID) );?>
<img src="<?php echo $feat_image ?>" class="img-responsive img-circle"/>
<div class="finlay-carousel-caption">
<?php $degisc= get_post_meta( $post->ID, '_my_meta_value_key', true );?>
<h1><?php echo $degisc;?></h1>
<?php $position = get_post_meta( $post->ID, '_my_meta_value_key1', true );?>
<p><?php echo $position;?></p>
<div class="line marginBottom15"></div>
<?php $words = get_post_meta( $post->ID, '_my_meta_value_key2', true );?>
<p><?php echo $words;?></p>
<div class="line"></div>
</div>
</div>
<?php } }
$post = $tmp_post;
?>
</div>
</div>
