Add the advanced Carousel widget to your Website

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


<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

Street Photography

Stand out with a professional Jimdo website

Street Photography


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

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.

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.

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.


<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

	bg-primary
	bg-primary-light
	bg-primary-dark
	bg-secondary
	bg-secondary-dark

	body
	top-header
	header
	content

	background
	text color
	link color
	horizontal line

Nature

Street Photography

Stand out with a professional Jimdo website

Street Photography

Service 01

Service 02

Service 03

Service 04

How to add a custom widget to your Jimdo website

Support

Features

Quick links

Get Inspired

	style 1
	style 2
	style 3

	social icons
	navigation color
	subnav background