diff --git a/src/assets/js/js.js b/src/assets/js/js.js
new file mode 100644
index 0000000..c2658a9
--- /dev/null
+++ b/src/assets/js/js.js
@@ -0,0 +1,22 @@
+jQuery(document).ready(function( $ ) {
+    $('#carouselExample').on('slide.bs.carousel', function (e) {
+
+        var $e = $(e.relatedTarget);
+        var idx = $e.index();
+        var itemsPerSlide = 3;
+        var totalItems = $('.carousel-item').length;
+        
+        if (idx >= totalItems-(itemsPerSlide-1)) {
+            var it = itemsPerSlide - (totalItems - idx);
+            for (var i=0; i<it; i++) {
+                // append slides to end
+                if (e.direction=="left") {
+                    $('.carousel-item').eq(i).appendTo('.carousel-inner');
+                }
+                else {
+                    $('.carousel-item').eq(0).appendTo('.carousel-inner');
+                }
+            }
+        }
+    });
+});
\ No newline at end of file
diff --git a/src/assets/scss/_media_query.scss b/src/assets/scss/_media_query.scss
index 500a9ac..46c673c 100644
--- a/src/assets/scss/_media_query.scss
+++ b/src/assets/scss/_media_query.scss
@@ -80,32 +80,29 @@ nav{
     }
     .tainacan-img-dest{
         @media only screen and (min-width: 768px) {
-
-            /* show 3 items */
+             /* show 3 items */
             .carousel-inner .active,
             .carousel-inner .active + .carousel-item,
-            .carousel-inner .active + .carousel-item + .carousel-item,
-            .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
+            .carousel-inner .active + .carousel-item + .carousel-item {
                 display: block;
             }
             
             .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
             .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
-            .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
-            .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
+            .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
                 transition: none;
             }
             
             .carousel-inner .carousel-item-next,
             .carousel-inner .carousel-item-prev {
-              position: relative;
-              transform: translate3d(0, 0, 0);
+                position: relative;
+                transform: translate3d(0, 0, 0);
             }
             
-            .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+            .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
                 position: absolute;
                 top: 0;
-                right: -25%;
+                right: -33.3333%;
                 z-index: -1;
                 display: block;
                 visibility: visible;
@@ -115,8 +112,7 @@ nav{
             .active.carousel-item-left + .carousel-item-next.carousel-item-left,
             .carousel-item-next.carousel-item-left + .carousel-item,
             .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
-            .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
-            .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+            .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
                 position: relative;
                 transform: translate3d(-100%, 0, 0);
                 visibility: visible;
@@ -136,15 +132,13 @@ nav{
             .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
             .carousel-item-prev.carousel-item-right + .carousel-item,
             .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
-            .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
-            .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+            .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
                 position: relative;
                 transform: translate3d(100%, 0, 0);
                 visibility: visible;
                 display: block;
                 visibility: visible;
             }
-        
         }
     }
 }
diff --git a/src/functions.php b/src/functions.php
index 0e9e2fe..c12abbc 100644
--- a/src/functions.php
+++ b/src/functions.php
@@ -36,6 +36,9 @@ function tainacanEnqueueScripts(){
     wp_enqueue_script('popper', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true);
     //JS Bootstrap 4
     wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.0.0', true);
+
+    //Javascript for Tainacan
+        wp_enqueue_script('jsTainacan', get_template_directory_uri() . '/assets/js/js.js', '', '', true);
 }
 add_action('wp_enqueue_scripts', 'tainacanEnqueueScripts');
 
diff --git a/src/single-colecoes.php b/src/single-colecoes.php
index 04c4f6a..ef1da61 100644
--- a/src/single-colecoes.php
+++ b/src/single-colecoes.php
@@ -52,41 +52,42 @@
         </div>
         <div class="row p-5">
             <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
-                <div class="carousel-inner row w-100 mx-auto" role="listbox">
-                    <div class="carousel-item col-md-4 active">
+                <div class="carousel-inner row w-100 mx-auto p-5" role="listbox">
+                    <div class="carousel-item col-md-4 p-5 active">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
                     </div>
-                    <div class="carousel-item col-md-4">
+                    <div class="carousel-item col-md-4 p-5">
                         <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
                     </div>
                 </div>
                 <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
-                    <i class="material-icons text-scooter">chevron_left</i>
+                    <i class="material-icons">chevron_left</i>
                     <span class="sr-only">Previous</span>
                 </a>
                 <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
-                    <i class="material-icons text-scooter">chevron_right</i>
+                    <i class="material-icons">chevron_right</i>
                     <span class="sr-only">Next</span>
                 </a>
             </div>
+
         </div>
     </section>
     <section class="tainacan-gallery-itens p-2">