Make it stand out
Showcase carousel
<style>
/* <![CDATA[ */
/*** custom styles for showcase carousel ***/
.is-showcase .owl-item > div {
cursor: pointer;
margin: 5%;
transition: margin 0.5s ease;
}
.is-showcase .owl-item.center > div {
cursor: auto;
margin: 0;
}
.is-showcase .owl-item:not(.center) > div:hover {
opacity: 1;
-webkit-transition: all 100ms linear;
-o-transition: all 100ms linear;
-moz-transition: all 100ms linear;
}
/*]]>*/
</style>
<!-- start carousel -->
<div class="is-fullwidth">
<div class="owl-carousel owl-theme is-showcase">
<div>
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/alsten-tmp.jpg?t=1589221378" alt="Matrix Themes" />
</div>
<div>
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/lemberg-tmp.jpg?t=1589221829" alt="Matrix Themes" />
</div>
<div>
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/altona-new.jpg?t=1595141354" alt="Matrix Themes" />
</div>
<div>
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/hisingen-mult-tmp.jpg?t=1549189561" alt="Matrix Themes" />
</div>
<div>
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/tjorn-tmp.jpg?t=1575368647" alt="Matrix Themes" />
</div>
</div>
</div>
<!-- end carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
var $owl = $('.is-showcase');
$owl.children().each( function( index ) {
$(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
});
$owl.owlCarousel({
center: true,
loop: true,
autoplay: true,
responsiveClass:true,
items: 3,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
}
}
});
// trigger
$(document).on('click', '.is-showcase .owl-item>div', function() {
var $speed = 300;
$owl.trigger('to.owl.carousel', [$(this).data( 'position' ), $speed] );
});
});
})(jQuery);
//]]>
</script>
Portfolio carousel
<style>
/* <![CDATA[ */
.is-portfolio .owl-item > div {
margin: 5px;
}
.is-portfolio.owl-carousel .owl-dots.disabled {
display: block;
}
.is-portfolio .is-new-caption {
display:block;
bottom:5px;
height:auto;
}
/*]]>*/
</style>
<!-- start carousel -->
<div class="owl-carousel owl-theme is-portfolio">
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide01.jpg" alt="Matrix themes" />
<div class="is-new-caption">
<div class="max-inner">
<div class="col-9 color-white add-30 cc-box">
<h3>
Nature
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="Matrix themes" />
<div class="is-new-caption">
<div class="max-inner">
<div class="col-9 color-white add-30 cc-box">
<h3>
Street Photography
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide-test.jpg?t=1588067569" alt="Matrix themes" />
<div class="is-new-caption">
<div class="max-inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="Matrix themes" />
<div class="is-new-caption">
<div class="max-inner">
<div class="col-9 color-white add-30 cc-box">
<h3>
Street Photography
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<!-- end carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-portfolio').owlCarousel({
center: false,
items:3,
loop:true,
margin:10,
dots:true,
autoplay:true,
autoHeight:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:3
}
}
});
});
})(jQuery);
//]]>
</script>
Service carousel
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
<style>
/* <![CDATA[ */
.is-service .owl-dots.disabled {
display:block!important;
}
.is-service .item {
margin: 3px;
padding:20px;
border-radius:10px;
background:#f0f0f0;
}
/*]]>*/
</style>
<div class="owl-carousel owl-theme is-service">
<!-- start slide -->
<div class="item">
<div class="fa fa-rocket fa-2x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 01
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-rocket fa-2x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 02
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-rocket fa-2x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 03
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-rocket fa-2x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 04
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
<!-- end slide -->
</div>
<!-- end carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-service').owlCarousel({
center: false,
items:3,
loop:true,
margin:10,
dots:true,
autoplay:true,
autoHeight:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:3
}
}
});
});
})(jQuery);
//]]>
</script>
Testimonial carousel
Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Happy customer
Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.
- Happy customer
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
- Happy customer
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
- Happy customer
<style>
/* <![CDATA[ */
.is-testimonial.owl-dots.disabled {
display:block!important;
}
.is-testimonial .item{
margin: 3px;
padding:20px;
background:transparent;
border-radius:15px;
border:1px solid #ccc;
}
/*]]>*/
</style>
<div class="owl-carousel owl-theme is-testimonial">
<!-- start slide -->
<div class="item">
<div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;">
</div>
<p>
Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<br />
<p class="size-12">
- Happy customer
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;">
</div>
<p>
Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id,
varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus
lacus blandit dui, id egestas quam mauris ut lacus.
</p>
<br />
<p class="size-12">
- Happy customer
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;">
</div>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<p class="size-12">
- Happy customer
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;">
</div>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<p class="size-12">
- Happy customer
</p>
</div>
<!-- end slide -->
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-testimonial').owlCarousel({
center: false,
loop:true,
margin:10,
dots:true,
autoplay:true,
autoHeight:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:3
}
}
});
});
})(jQuery);
//]]>
</script>
Quote carousel
Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Name 01.
Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.
- Name 02.
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
- Name 03.
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
- Name 04.
<style>
/* <![CDATA[ */
.is-blockquote.owl-dots.disabled {
display:block!important;
}
.is-blockquote .item {
border-left:5px solid #333;border-radius:0;
background:#f0f0f0;
padding:30px;
}
/*]]>*/
</style>
<div class="owl-carousel owl-theme is-blockquote">
<!-- start slide -->
<div class="item">
<p>
Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<br />
<p class="size-12">
- Name 01.
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<p>
Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius
ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus
blandit dui, id egestas quam mauris ut lacus.
</p>
<br />
<p class="size-12">
- Name 02.
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<p class="size-12">
- Name 03.
</p>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
<br />
<p class="size-12">
- Name 04.
</p>
</div>
<!-- end slide -->
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-blockquote').owlCarousel({
center: false,
smartSpeed: 500,
loop:true,
margin:10,
dots:true,
autoplay:true,
autoHeight:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
})(jQuery);
//]]>
</script>
Logo carousel
<style>
/* <![CDATA[ */
.is-logoslider .owl-item > div {
margin: 5px;
}
.is-logoslider.owl-carousel .owl-dots.disabled {
display: block;
}
.is-logoslider .is-matrix {
min-height:100px;
}
.is-logoslider .item img {
height:auto;
width:80px!important;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*]]>*/
</style>
<div class="owl-carousel owl-theme is-logoslider">
<!-- start slide -->
<div class="item">
<div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo01.png" alt="Matrix themes" />
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo02.png" alt="Matrix themes" />
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo03.png" alt="Matrix themes" />
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item">
<div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo01.png" alt="Matrix themes" />
</div>
</div>
<!-- end slide -->
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
"sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-logoslider').owlCarousel({
center: false,
items:3,
loop:true,
margin:10,
dots:true,
autoplay:true,
autoHeight:true,
responsive:{
0:{
items:2
},
600:{
items:2
},
1000:{
items:3
}
}
});
});
})(jQuery);
//]]>
</script>
Click the Matrix Themes admin menu and select the 'Shortcodes' section.
Choose any custom widget using the copy button.
Paste the widget code to your website inside the 'Widget/HTML' module.
Customize it by adding your own text and images.
Make your own website
with built-in tools to grow your business online.