我如何在打开的购物车中使用引导滑块

Question

有没有人尝试使用opencart幻灯片模块的引导幻灯片？

这是我正在尝试但获取所有活动类的代码。有人可以帮助我。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner slideshow <?php echo $module; ?>">
<div class="item active">
    <?php foreach ($banners as $banner) { ?>
    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
    <?php } ?>
    <?php } ?>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    </div>

Answer 1

UPD：循环必须像这样

<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner slideshow<?php echo $module; ?>">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<div class="item"><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a></div>
<?php } else { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } ?>
<?php } ?>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="bootstrap_left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="bootstrap_right"></span></a>
</div>
</div>

和 jquery

<script type="text/javascript"><!--
$(document).ready(function() {
$('.item:first-child').addClass('active');
$('.carousel').carousel();
});
--></script>

Answer 2

正如您在第 3 行中看到的那样，您有 <div class="item active"> .

你需要把它包含在你的php循环中。然后创建一个条件，如果它是第一项，则将其类设置为 item active 然后在 else 语句中只item .

尝试使用此示例代码解决它。

<?php $i = 1; ?>
<?php foreach ($rows as $row): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">
      <a href="<?php echo $row['url']; ?>">
        <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
      </a>
    </div>
<?php $i++; ?>
<?php endforeach; ?>

Answer 3

您是否参考或检查了代码输出的 html 版本。如果西米勒引导轮播设置应该是什么？

请参考它。引导轮播

否则参考这个小提琴JSFIDDLE演示

轮播脚本

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});
/* SLIDE ON CLICK */ 
$('.carousel-linked-nav > li > a').click(function() {
    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));
    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);
    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');
    // add active class to just clicked on item
    $(this).parent().addClass('active');
    // don't follow the link
    return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slid', function() {
    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');
    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();
    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});

Answer 4

Manchary的想法是正确的。我已经对此进行了测试，并在我的Opencart中运行它。

以下是要添加到的完整代码：目录/视图/主题/您的主题/模板/模块/轮播.tpl

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$i = 0;
foreach ($banners as $banner) {
    echo "<li data-target="#myCarousel" data-slide-to="".$i."" class="indicator"></li>n";
    $i++;
}
?>
</ol>
<!-- slides -->
<div class="carousel-inner">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<div class="item"><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a></div>
<?php } else { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } ?>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript">
//<![CDATA[ 
    jQuery(document).ready(function($){
    $('#myCarousel ol.carousel-indicators li:first').addClass('active');
       $('#myCarousel .item:first').addClass('active');
        $('#myCarousel').carousel({
        interval: 8000
    });
});
//]]> 
</script>

注意* 如果 jQuery 文档准备就绪导致悲伤，您可以尝试

window.onload = function() {
    // code here
}

希望这对某人有所帮助。