Style Editor Docs
   

 

Easy-to-Use & Customizable 

Advanced Carousel Widget 

 

Live Preview
draggable-hero text-center
How to add custom widget to your Jimdo website pull-down

Make it stand out

Showcase carousel

Matrix Themes
Matrix Themes
Matrix Themes
Matrix Themes
Matrix Themes 

<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

Nature

Read more

Street Photography

Read more

Stand out with a professional Jimdo website

Read more

Street Photography

Read more 

<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

Service 01

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.


read more

Service 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.


read more

Service 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.


read more

Service 04

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.


read more 

<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>

How to add a custom widget to your Jimdo website

01.

Click the Matrix Themes admin menu and select the 'Shortcodes' section.

02.

Choose any custom widget using the copy button.

03.

Paste the widget code to your website inside the 'Widget/HTML' module.

04.

Customize it by adding your own text and images.

hs-fullwidth bg-lightgray
How to add a custom widget to Jimdo website wow animated fadeInUp

Make your own website

with built-in tools to grow your business online.

Select a template
bg-primary color-white hs-fullwidth


Showcase
draggable-logo

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
 

Note: All changes made here will be applied to your entire website.
is-switcher admin-only

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit