- 首页
- 其他开发
- 带有 OS-Class 的 Bootstrap 轮播
带有 OS-Class 的 Bootstrap 轮播
[英] Bootstrap carousel with OS-Class
本文介绍了带有 OS-Class 的 Bootstrap 轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要像这样创建动态引导轮播:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指标--><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>等等...</ol><!-- 幻灯片包装器--><div class="carousel-inner"><div class="item active"><img src="someIMG.jpg" alt="...">
<div class="item"><img src="someIMG-nn.jpg" alt="...">
等等...
<!-- 控件--><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>
现在我有一个 osclass 函数，我调用它来动态创建引导轮播:
**<?php if(osc_images_enabled_at_items() && (osc_count_item_resources() > 0) ) { ?>**<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators">**<?php $i=0;?>****<?php while( osc_has_item_resources() ) { ?>**<li data-target="#carousel-example-generic" data-slide-to="**<?php echo $i; $i+1;?>**" class="active">**<?php } ?>**</ol><!-- 幻灯片包装器--><div class="carousel-inner">**<?php while( osc_has_item_resources() ) { ?>**<div class="item"><img src="**<?php echo osc_resource_url(); ?>**" alt="...">
**<?php } ?>**
<!-- 控件--><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>
我是初学者，所以我不知道这里有什么问题.在我的逻辑中，我认为我写得很好，但我写的却行不通... 两段时间是问题还是其他什么?
请帮忙，对不起我的英语.谢谢！
解决方案
离你很近了.但是您使用该循环两次，这可能不起作用.我不确定 osc_has_item_resources() 对记录做了什么.但是试试这个.
设置一个变量等于 osc_count_item_resources() 中的任何值，然后循环多次以构建轮播指标.完成后，使用 while( osc_has_item_resources() ) 循环并构建项目.
<?php osc_run_hook('item_detail', osc_item());?><?php if(osc_images_enabled_at_items() && (osc_count_item_resources() > 0) ) { ?><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"><?php $itemCount = osc_count_item_resources();?><?php for($i = 0; $i < $itemCount; $i++) { ?><li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>"class="active"></li><?php } ?></ol><!-- 幻灯片包装器--><div class="carousel-inner"><?php $i = 0;?><?php while( osc_has_item_resources() ) { ?><div class="item<?php echo ($i === 0) ? 'active': ''; ?>"><img src="<?php echo osc_resource_url(); ?>"alt="..."><?php $i++;?><?php } ?>
<!-- 控件--><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>
I need to create dynamically bootstrap carousel like this:
<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>
etc...
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="someIMG.jpg" alt="...">
</div>
<div class="item">
<img src="someIMG-nn.jpg" alt="...">
</div>
etc...
</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>
Now I have a osclass functions which I call to create dynamically bootstrap carousel:
**<?php osc_run_hook('item_detail', osc_item() ) ; ?>
<?php if( osc_images_enabled_at_items() && (osc_count_item_resources() > 0) ) { ?>**
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
**<?php $i=0;?>**
**<?php while( osc_has_item_resources() ) { ?>**
<li data-target="#carousel-example-generic" data-slide-to="**<?php echo $i; $i+1;?>**" class="active"></li>
**<?php } ?>**
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
**<?php while( osc_has_item_resources() ) { ?>**
<div class="item">
<img src="**<?php echo osc_resource_url(); ?>**" alt="...">
</div>
**<?php } ?>**
</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>
I'm beginner so I don't know what can be a problem here. In my logic I think that I write good but what I write don't work... Two while is the problem or something else?
please help, sorry for my English. THANKS!
解决方案
You're close. But you're using that loop twice and that may not work. I'm not sure what osc_has_item_resources() does with the records. But try this.
Set a variable equal to whatever is in osc_count_item_resources() and then loop that many times to build the carousel indicators. After you do that, use while( osc_has_item_resources() ) to loop through and build the items.
<?php osc_run_hook('item_detail', osc_item() ) ; ?>
<?php if( osc_images_enabled_at_items() && (osc_count_item_resources() > 0) ) { ?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php $itemCount = osc_count_item_resources(); ?>
<?php for($i = 0; $i < $itemCount; $i++) { ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" class="active"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $i = 0; ?>
<?php while( osc_has_item_resources() ) { ?>
<div class="item<?php echo ($i === 0) ? ' active': ''; ?>">
<img src="<?php echo osc_resource_url(); ?>" alt="...">
</div>
<?php $i++; ?>
<?php } ?>
</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>
这篇关于带有 OS-Class 的 Bootstrap 轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
