Topic: BS 3 carousel snippet

If you need your <?php echo Blog::getPostsBlock(5); ?>

like bootstrap carousel commponent you should change your block.view.php from blog plugin to:


<div class="carousel slide" id="mycarousel" data-ride="carousel" data-interval="12000">
        <div class="carousel-inner">
        <?php foreach($posts as $post) { ?>
        <div class="item">
          <h6 class="monstra-blog-title">
          <a href="<?php echo Option::get('siteurl'); ?>/<?php echo Blog::$parent_page_name; ?>/<?php echo $post['slug'] ?>"><?php echo $post['title']; ?></a>
          </h6>
          <small class="monstra-blog-date">posted <b><?php echo Date::format($post['date'], 'd.m.Y'); ?></b></small>
          <div class="monstra-blog-post">
          <p style="padding-top:4px;"><?php echo Text::cut(strip_tags($post['content']), 150); ?></p>
          </div> 
        </div>
        <?php } ?>
        </div>
</div>
<script type='text/javascript'>
$(function(){$('.item:first-child').addClass('active');});
</script>

if you know bootstrap syntax you can change view of your carousel with css and add to carousel new elements

Re: BS 3 carousel snippet

Yup !    wink

MonstraCreative - The first and only Monstra Club // Themes and Plugins for Monstra > www.monstracreative.tk wink
Themes and Plugins for Monstra Support Forum > www.monstracreative.tk/forum
Demo Themes and Plugins for Monstra > www.monstracreative.tk/demo

wormsunited's Website

Re: BS 3 carousel snippet

after <div class="carousel-inner"> </div> add:

<div class="carousel-controls">
<a class="carousel-control left" href="#mycarousel" data-slide="prev"><span class="fa fa-angle-left"></span></a>
<a class="carousel-control right" href="#mycarousel" data-slide="next"><span class="fa fa-angle-right"></span></a>
</div>   

and style it with css:

<style>
.carousel-control.left, .carousel-control.right {
    background-image:none !important;
}
.carousel-control {
    background: transparent;
    color:#ddd;
    padding: 4px 0;
    width:26px;
    top:0;    
    left:auto;
    bottom:auto;
    opacity:1;
    text-shadow:none;
}
.carousel-control:hover, .carousel-control:focus   {
color:#ddd;
}
.carousel-control.right {
    right:0px;
}
.carousel-control.left {
    right: 20px;
}
</style>

finally you achieve carousel controls at top right corner of carousel which can control manually carousel slides order

Re: BS 3 carousel snippet

Nice one! wink

In Nox and Flux Templates by MonstraCreative you have the codding on the .css file and the .js files, you dont need to code that, simply call the actions and it runs by himself, even so it's very nice! I like it very much.

wink

MonstraCreative - The first and only Monstra Club // Themes and Plugins for Monstra > www.monstracreative.tk wink
Themes and Plugins for Monstra Support Forum > www.monstracreative.tk/forum
Demo Themes and Plugins for Monstra > www.monstracreative.tk/demo

wormsunited's Website