• legmet
  • Monstra Student
  • Offline

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

  • From: Portugal
  • Posts: 270
  • Reputation : [ 10 | 0 ]

Re: BS 3 carousel snippet

Yup !    wink

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

wormsunited's Website

  • legmet
  • Monstra Student
  • Offline

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

  • From: Portugal
  • Posts: 270
  • Reputation : [ 10 | 0 ]

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

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

wormsunited's Website