<div class="container">
<!-- TOP -->
<?php var_dump($products['upper']); ?>
<div class="row" style="margin-top: 20px">
<div class="col-md-offset-3 col-md-6">
<h4 class="text-center"><small>STEP 1:</small> Choose your TOP</h4>
<div id="top-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($products['upper'] as $index => $product): ?>
<div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
<img name="data" value="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
<?php echo $product['productname']; ?>
</div>
</div>
<?php endforeach ?>
</div>
<a class="left carousel-control" href="#top-carousel" role="button" data-slide="prev">
<i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
</a>
<a class="right carousel-control" href="#top-carousel" role="button" data-slide="next">
<i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
</a>
</div>
</div>
</div>
<?php var_dump($products['lower']); ?>
<!-- BOTTOM -->
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h4 class="text-center"><small>STEP 2:</small> Choose your BOTTOM</h4>
<div id="bottom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($products['lower'] as $index => $product): ?>
<div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
<img name="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
<?php echo $product['productname']; ?>
</div>
</div>
<?php endforeach ?>
</div>
<a class="left carousel-control" href="#bottom-carousel" role="button" data-slide="prev">
<i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
</a>
<a class="right carousel-control" href="#bottom-carousel" role="button" data-slide="next">
<i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-7" style="padding-top: 50px">
<h4 class="text-center"><small>STEP 3:</small> Submit</h4>
<button type="submit" form="hidden_form" class="btn btn-lg btn-block btn-primary">Go!</button>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
var index = $(this).find(".active").index();
// Stop those carousels from spinning
$('.carousel').carousel({
interval : false
});
// Let's figure out what the customer chose on the carousel
// and then put it on the hidden form
$('.carousel').on('slide',function(e){
var slideFrom = $(this).find('.active').index();
var slideTo = $(e.relatedTarget).index();
console.log(slideFrom+' => '+slideTo);
});
});
</script>
获取product_ID数据的最简单方法如下
<img class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<input type="hidden" value="<?php echo $product['productID'] ?>" name="data" />
使用<input type="hidden"标记可以精确地获取值。