Javascript 如何使用php和mysql在单行引导滑块中获取不同的数据结果
我想通过从mysql获取数据,使用php创建一个动态引导滑块。我面临的问题是,我在一排幻灯片中获得了所有类似的产品。如何在一行幻灯片中获取多个数据。我想在引导程序的不同列中显示不同的产品。在这个幻灯片中,它包含两类js,分别是项目和项目活动。我在项目和项目活动上分别获得相同的图像,但作为单独的滑块,它们都显示不同的图像我想在所有类的不同列中获取所有不同的数据。 …仅供参考,我已经包含了我的图像Javascript 如何使用php和mysql在单行引导滑块中获取不同的数据结果,javascript,php,css,mysqli,twitter-bootstrap-3,Javascript,Php,Css,Mysqli,Twitter Bootstrap 3,我想通过从mysql获取数据,使用php创建一个动态引导滑块。我面临的问题是,我在一排幻灯片中获得了所有类似的产品。如何在一行幻灯片中获取多个数据。我想在引导程序的不同列中显示不同的产品。在这个幻灯片中,它包含两类js,分别是项目和项目活动。我在项目和项目活动上分别获得相同的图像,但作为单独的滑块,它们都显示不同的图像我想在所有类的不同列中获取所有不同的数据。 …仅供参考,我已经包含了我的图像 最畅销的产品 循环为每个产品创建一个新的“项”和三个“col-md-4”。您只需要有一个“col-
最畅销的产品
循环为每个产品创建一个新的“项”和三个“col-md-4”。您只需要有一个“col-md-4”,并且每三次执行一次检查以启动一个新的“项”
这不是一件非常复杂的事情,但是要将所有的支票和开始和结束标记正确地放置在循环的内部和外部可能会很棘手。退出循环时,请始终记住关闭最后一个div
之后我们在评论中来来回回。这应该用作index.php
文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Clickart</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="css/animated.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!---->
<!---->
<!--container ends here-->
<div class="container-fluid">
<!--upper row bar starts here-->
<div class="row msp" id="most-sold"><!--most sold product slider-->
<h3/>Most Sold out Products</h3>
<?php
$msp_query = "SELECT * FROM product WHERE cat_tag = 'mostsoldout' AND sales_completed > 0 ORDER BY sales_completed DESC";
$msp_run = mysqli_query($con,$msp_query);
if(mysqli_num_rows($msp_run)>0){
?>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$check = 0;
$full_page = 0;
while ($msp_row = mysqli_fetch_array($msp_run)) {
$pro_id = $msp_row['id'];
$pro_image = $msp_row['image1'];
$pro_desc = $msp_row['description'];
$pro_price = $msp_row['cost'];
$pro_rating = $msp_row['rating'];
$pro_title = $msp_row['title'];
$check = $check + 1;
if($full_page == 0){
if($check == 1){ ?>
<div class='row item active'>
<?php } else { ?>
</div><div class='row item'>
<?php }
} ?>
<div class="col-md-4">
<a href="#">
<div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" alt="item" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div>
</a>
</div>
<?php
$full_page++;
if($full_page == 2) {
$full_page = 0;
}
} ?>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span style="color:black"; class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span style="color:black"; class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}else{
echo "<center>No products yet</center>";
}
?>
</div><!--most sold product slider-->
</div>
<!--container ends here-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/script.js"></script>
<script src="js/bootstrap-dropdownhover.min.js"></script>
</body>
</html>
点击艺术
最畅销的产品
window.jQuery | | document.write(“”)
Gregkos非常感谢answeing。但如果我只放置一个列,则只有一个项目显示在一行幻灯片中,另一个项目显示在另一行幻灯片中。“我的滑块”总共包含两个滑块行,每个行由三个项目组成。一行一张幻灯片中的3个项目。像这样,如果我总共有15个产品,并且在每个滑块行中除以其中的3个,那么总共将存在5个滑块行。这就是我的滑块的工作原理。基于此,如果我使用单个项目维护一列,那么总共15个产品将进入15个滑块行,但不是通过划分为3(产品)/5(滑块行)再发现一件事,即在我的所有列上应用相同的sql查询,因此相同的数据将被重新处理请查看我的更新答案,并让我知道它是否适用于您。:)亲爱的gregkos,它工作了,但是在3个项目之后,剩余的项目在滑块下面,我想在一个时间滑块中显示3个项目,在3个项目必须在另一个滑块中显示之后。我会把截图给你参考-你使用的是我可以在线看到的特定滑块吗?正确的格式因每个滑块的结构而异。如果是您自己的问题,您能否使用完整的相关代码更新该问题?