[英]how i use bootstrap slider in open cart
有沒有人嘗試過使用opencart slideshow模塊進行引導幻燈片?
這是我正在嘗試的代碼,但正在獲取所有活動的類。 有人可以幫助我。
<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>
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>
您是否參考或檢查了代碼輸出的html版本。 如果對引導輪播設置應該是什么相似?
請參考一下。 自舉輪播
否則請參閱此小提琴JSFIDDLE DEMO
輪播劇本
// 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');
});
如第三行所示,您具有<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; ?>
Manchary有一個正確的想法。 我已經對此進行了測試,並在我的Opencart中運行了它。
這是要添加到的完整代碼:catalog / view / theme / yourtheme /template/module/carousel.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
}
希望這對某人有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.