diff --git a/default.hbs b/default.hbs
index 559fd95..d8db1d9 100644
--- a/default.hbs
+++ b/default.hbs
@@ -33,6 +33,48 @@
     {{!-- Prismjs: css--}}
     <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
 
+    {{!-- glide.js slider on on homepage --}}
+
+    {{#is "home"}}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.min.css">
+
+    {{!-- Add and override styles from glide.js  --}}
+
+    <style type="text/css">
+
+    .slide-txt {
+        position: relative;
+        bottom: 5rem;
+        left: 20px;
+    }
+
+    .glide__slide img {
+        object-fit: cover;
+        position: relative;
+        height: 360px;
+        border-radius: 10px;
+    }
+
+
+    a.tf-tag-glider {
+        background-color: rgba(0,0,0,.7);
+        color: #fff;
+        border-radius: 6px;
+        padding: 5px 7px;
+        font-size: 1.1rem;
+        line-height: 1;
+        text-shadow: none;
+        font-weight: 400;
+        position: relative;
+        bottom: 11rem;
+        left: 20px;
+    }
+
+    </style>
+    {{/is}}
+
+
 </head>
 
 <body class="has-background-light-line">
@@ -87,22 +129,28 @@
     {{!-- import js --}}
     <script src="{{asset 'js/main.js'}}"></script>
     
-    {{!-- carousel: js --}}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
-    <script>
-        $(document).ready(function(){
-            $('#carousel-home').slick({
-                autoplay: true,
-                infinite: true,
-                slidesToShow: 1,
-                slidesToScroll: 1,
-                arrows:false,
-                dots: false,
-                centerMode: false,
-                focusOnSelect: false
-            });
-        });      
+    {{!-- carousel: using glide.js  --}}
+
+    
+
+    {{#is "home"}}
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.min.js"></script>
+
+    <script>    
+        window.addEventListener('load', function(){
+        new Glide('.glider', {
+        type: 'carousel',
+        startAt: 0,
+        perView: 1,
+        autoplay: 2000,
+        hoverpause: true,
+        }).mount();
+        })
     </script>
+
+    {{/is}}
+
     
     {{!-- switches: showcase & support_fizzy --}}
     <script>
diff --git a/partials/showcase.hbs b/partials/showcase.hbs
index 9853955..a1b1cca 100644
--- a/partials/showcase.hbs
+++ b/partials/showcase.hbs
@@ -1,84 +1,88 @@
 {{!-- Homepage Showcase 2019.05.27--}}
 
-{{!-- slick: css --}}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
-
-
-<section class="section showcase is-hidden" id="showcase">
+<section class="section showcase" id="showcase">
     <div class="columns">
         <div class="column is-hidden-touch is-1-desktop is-1-widescreen is-2-fullhd"></div>
         <div class="column is-12-tablet is-10-desktop is-10-widescreen is-8-fullhd">
             <div class="columns">
                 {{!-- carousel start--}}
+
                 <div class="column is-7">
-                    <div class="carousel" id="carousel-home">
-                        {{!-- get 10 posts with tag #carousel as --}}
-                        {{#get "posts" limit="6" include="tags,authors" filter="tags:[hash-carousel]" as |carousel|}} 
-                        {{#foreach carousel}}
-                            <div class="carousel-item box img-bg has-shadow-lift can-scale" style="background-image: url({{img_url feature_image size="large"}});">
-                                <a href="{{url}}" rel="bookmark" class="link-block"></a>
-                                <div class="carousel-meta bg-grad-b">
-                                    {{#primary_tag}}
-                                        <div class="carousel-tag">
-                                            <a href="{{url}}" class="is-montserrat">{{name}}</a>
-                                        </div>
-                                    {{/primary_tag}}
-                                    <a href="{{url}}"><h2 class="is-size-4 is-size-5-mobile is-margin-bottom-05 has-text-white has-text-weight-semibold has-text-shadow-black">{{title}}</h2></a>
-                                    {{#primary_author}}
-                                        <div class="columns is-mobile is-vcentered">
-                                            <div class="column is-narrow" style="padding-right:.5em;">
-                                                <a href="{{url}}">
-                                                    <figure class="image is-24x24">
-                                                    <img class="image-squared is-rounded" src="
-                                                        {{#if profile_image}}
-                                                            {{img_url profile_image size="icon"}}
-                                                        {{else}}
-                                                            {{asset 'images/user-avatar-default.png'}}
-                                                        {{/if}}
-                                                    " alt="{{name}}" title="{{name}}">
-                                                    </figure>
-                                                </a>
-                                            </div>
-
-                                            <div class="column is-narrow has-text-weight-bold is-hpaddingless">
-                                                <a href="{{url}}" class="has-text-white">{{name}}</a>
-                                            </div>
-                                        </div>
-                                    {{/primary_author}}
-                                </div>
-                            </div>
-                        {{/foreach}}
-                        {{/get}}
+                    <div class="glider">
+
+                        <div class="glide__track" data-glide-el="track">
+
+                            <ul class="glide__slides">
+                                {{!-- get 10 posts with tag #carousel as --}}
+                                {{#get "posts" limit="6" include="tags,authors" filter="tags:[hash-carousel]" as
+                                |carousel|}}
+                                {{#foreach carousel}}
+
+                                <li class="glide__slide">                                
+                                    <a href="{{url}}">
+                                        <img src="{{img_url feature_image size=" large"}}" alt="{{feature_image_alt}}">
+                                        <h2 class="slide-txt is-size-4 is-size-5-mobile has-text-white has-text-weight-semibold has-text-shadow-black">
+                                            {{title}}
+                                        </h2>
+                                        
+                                        {{#primary_tag}}
+                                        
+                                            <a class="tf-tag-glider .is-montserrat" href="{{url}}" class="is-montserrat">{{name}}</a>
+                                        
+                                        {{/primary_tag}}
+                                        
+                                    </a>                                
+                                </li>
+                                
+
+                                {{/foreach}}
+                                {{/get}}
+                            </ul>
+
+                        </div>
+
                     </div>
+
                 </div>
+
                 {{!-- carousel end --}}
 
-                {{!-- top-featured start --}}
-                <div class="column is-5">
-                    {{#get "posts" limit="2" include="tags" filter="featured:true" as |top-featured|}}
-                    <div class="top-featured">
-                        {{#top-featured}}
-                        <div class="tf-item img-bg box has-shadow-lift can-scale" style="background-image: url({{img_url feature_image size="medium"}});background-position: center center;background-repeat: no-repeat;background-size: cover;">
-                            <span class="featured-label is-montserrat" style="right:5px;top:5px;padding:0 3px;" title="{{t "Featured"}}"><i class="iconfont icon-star"></i> <span>{{t "Featured"}}</span></span>
+            
+            {{!-- top-featured start --}}
+            <div class="column is-5">
+                {{#get "posts" limit="2" include="tags" filter="featured:true" as |top-featured|}}
+                <div class="top-featured">
+                    {{#top-featured}}
+                    <div class="tf-item img-bg box has-shadow-lift can-scale"
+                        style="background-image: url({{img_url feature_image size=" medium"}});background-position:
+                        center center;background-repeat: no-repeat;background-size: cover;">
+
+                        <a href="{{url}}" rel="bookmark" class="link-block"></a>
+                        <div class="tf-meta bg-grad-b">
                             <a href="{{url}}" rel="bookmark" class="link-block"></a>
-                            <div class="tf-meta bg-grad-b">
-                                <a href="{{url}}" rel="bookmark" class="link-block"></a>
-                                {{#primary_tag}}
-                                    <div class="tf-tag">
-                                        <a href="{{url}}" class="is-montserrat">{{name}}</a>
-                                    </div>
-                                {{/primary_tag}}
-                                <a href="{{url}}"><h2 class="is-size-5 has-text-white has-text-weight-semibold has-text-shadow-black">{{title}}</h2></a>
-                            </div>    
+
+                            {{#primary_tag}}
+                            <div class="tf-tag">
+                                <a href="{{url}}" class="is-montserrat">{{name}}</a>
+                            </div>
+                            {{/primary_tag}}
+
+
+                            <a href="{{url}}">
+                                <h2 class="is-size-5 has-text-white has-text-weight-semibold has-text-shadow-black">
+                                    {{title}}</h2>
+                            </a>
                         </div>
-                        {{/top-featured}}
                     </div>
-                    {{/get}}
+                    {{/top-featured}}
                 </div>
-                {{!-- top-featured end --}}
+                {{/get}}
             </div>
+            <div class="column is-hidden-touch"></div>
+            {{!-- top-featured end --}}
         </div>
-        <div class="column is-hidden-touch"></div>
+    </div>
+
+    <div class="column is-hidden-touch"></div>
     </div>
 </section>
\ No newline at end of file
