как я использую слайдер начальной загрузки в открытой корзине

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

Вы ссылаетесь или проверяете версию html, выводимую из вашего кода. Если simillar должен быть настроен на настройку карусели?

Пожалуйста, обратитесь к нему. BOOTSTRAP CAROUSEL

Else относятся к этой скрипкой JSFIDDLE DEMO

Carousel Script

// 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 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

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 4

Манчары имел правильную идею. Я проверил это и запустил его в своем Opencart.

Вот полный код, чтобы добавить в: каталог/вид/темы/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 
} 

Надеюсь, это поможет кому-то.