Question

我需要在主页页面上附加滑块。但该滑块应该按照 Bootstrap 工作。

我的code滑块：

<div class="row">
<div class="flexslider flexslider-7-<?php echo $blocks['bannerslider_id'] ?> col-md-4 col-md-offset-4 "  >
    <ul class="slides"> 
    <?php foreach ($banners as $banner): ?>
            <li>
                <a href="<?php echo $banner['click_url']?>" target="<?php echo $this->getTarget($banner['tartget'])?>" onclick="bannerClicks('<?php echo $banner['banner_id'] ?>','<?php echo $blocks['bannerslider_id'] ?>')" style="display:block"><img alt="<?php echo $banner['image_alt'];?>" src="<?php echo $this->getBannerImage($banner['image']); ?>"/></a>
            </li>
    <?php endforeach; ?>        
    <!-- items mirrored twice, total of 12 -->
    </ul>
</div>
</div>

我想将此响应。

但在此之后，反之亦然。它的行为完全与我的期望相反

我需要使用Bootstrap知道一个滑块示例，我应该在此代码中做些哪些更改才能使其响应？

Answer 1

您可以尝试基于bootstraps carousel插件：

以下内容是根据this example

修改的

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <?php foreach ($banners as $banner): ?>
        <div class="item active">
          <img alt="<?php echo $banner['image_alt'];?>" src="<?php echo $this->getBannerImage($banner['image']); ?>"/>
          <div class="carousel-caption">
            <?php echo "some caption"; ?>
          </div>
        </div>
    <?php endforeach; ?> 
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

注意，您需要在.carousel-indicators

中添加一些PHP

如何使用带滑块系统的bootstrap网格

1 个答案: