Carousels

STYLE 1


<div class="owl-carousel owl-theme grid-carousel">
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
</div>


<div class="owl-carousel owl-theme grid-carousel owl-dots-right">
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-1.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-2.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
    <div class="item">
        <div class="card card-blog">
            <a href="#" title=""><img alt="" class="card-img-top" src="/sites/default/files/theme/blog-3.jpg" /></a>
            <div class="card-body">
                <div class="card-category"><a href="#" title="">CATEGORY</a></div>
                <h3><a href="#" title="">Lorem ipsum dolor sit amet</a></h3>
                <div class="card-post-info">By <a href="#" title="">User Name</a><span class="divider">/</span>2 Months Ago</div>
                <p>Duis accumsan eu eros vitae blandit. Sed volutpat non quam a rutrum. In facilisis semper.</p>
            </div>
            <div class="card-footer"><a href="#" title="">Read More</a></div>
        </div>
    </div>
</div>