Create Bootstrap carousel to show multiple items per slide:

HTML:

<!– slider –>

<div class=”row”>
<div class=”col-md-12″>
<div class=”carousel slide multi-item-carousel” id=”theCarousel”>
<div class=”carousel-inner”>
<?php if(!empty($slider) && count($slider) > 0):?>
<?php foreach($slider as $key =>$slide):?>
<div class=”item <?php if($key==0){ echo “active”; } ?>”>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<a href=”#1″><img src=”<?=base_url(‘assets/images/aboutslider/’)?><?=$slide[‘images’]?>” class=”img-responsive”></a>
</div>
</div>
<?php endforeach?>
<?php endif?>
<!– Example item end –>
</div>
<a class=”left carousel-control” href=”#theCarousel” data-slide=”prev”><i class=”glyphicon glyphicon-chevron-left”></i></a>
<a class=”right carousel-control” href=”#theCarousel” data-slide=”next”><i class=”glyphicon glyphicon-chevron-right”></i></a>
</div>
</div>
</div>

<!– slider –>

 

CSS:

<style type=”text/css”>
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}

</style>

JS:

<script type=”text/javascript”>

$(‘.multi-item-carousel’).carousel({
interval: false
});

$(‘.multi-item-carousel .item’).each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(‘:first’);
}
next.children(‘:first-child’).clone().appendTo($(this));

if (next.next().length>0) {
next.next().children(‘:first-child’).clone().appendTo($(this));
} else {
$(this).siblings(‘:first’).children(‘:first-child’).clone().appendTo($(this));
}
});

</script>

0 Comments

Leave a Comment

jojobetmedyum fermanmedyummedyum simonmedyum kalendermedyum cozum
HacklinkHair Transplant istanbul
da pa kontrolü
marsbahis giriş
Vozol Puff
iqos terea
instagram takipçi
takipçi
antalya escort
ankara escort
bursa escort
izmit escort
viagra
kavbet
bahçelievler nakliyat
istanbul evden eve nakliyat
istanbul bahçelievler evden eve nakliyat
hair transplant
istanbul anlık haberler
extrabet
extrabet güncel
deneme bonusu
deneme bonusu veren siteler
deneme bonusu veren siteler
bonus veren siteler
grandpashabet güncel giriş
grandpashabet
grandpashabet
grandpashabet
grandpashabet
https://tipobet.bet/
deneme bonusu veren siteler
casibom
casibom giriş
casibom
casibom giriş
gamdom giriş
sightcare
betturkey giriş
betturkey giriş
gamdom
romabet
romabet
romabet
holiganbet
casibom giri?casibom giri?casibomjojobetjojobetlunabetjojobetjojobet giri?jojobet giri?fixbetfixbet g�ncel giri?jojobetjojobetjojobetfixbetcasibom giri?casibom giri?casibom giri?casibom giri?casibom giri?casibom giri?ravenbahiscasibom giri?casibombetebetpusulabett�mbetcasibom g�ncel giri?matbetperabet