Glide, a pure JS image slider! No more jQuery

I’m using a theme which has a jQuery slider, and it slows things down. Found glide.js which is pure vanilla js and it really speeds things up. Documentation is… … somewhat terse so I’ll share here if anyone needs a slider for their theme.

Homepage on

Structure for the slider in a template, glideButtons are written by a separate script below, and sliderItems keep track of how many slides we have

{{#get "posts" limit="6" include="tags,authors" filter="tags:[hash-carousel]" as |carousel|}}
      var sliderItems = {{posts.length}};
<div class="glide">                              
   <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
        {{#foreach carousel}}
          <li class="glide__slide">                                 
               <a href="{{url}}">
               <img src="{{img_url feature_image size=" large"}}" alt="{{feature_image_alt}}">
     <div id="glideButtons" class="glide__bullets" data-glide-el="controls[nav]"></div>                            

Bullets indicating the current slide are tricky, using sliderItems to know how many Bullets there are, they are buttons and have to be loaded separately with a unique ID and glideButtons DIV must be available before the script can run…

   <script type="text/javascript">
        for (let i = 0; i < sliderItems; i++) {
           var buttonWrapper = document.createElement('button');
           buttonWrapper.className = "glide__bullet";                                                 
           buttonWrapper.setAttribute("data-glide-dir", "=" + i);                                    

Initialize from default.hbs - .mount() executes

    <script src="" ></script>   

        window.addEventListener('load', function(){
        new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 1,
        autoplay: 2000,
        hoverpause: true,

We also need some stylesheets in HEAD, Core and Theme.
The glide.theme.css can be local for styling

    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">

… and that’s it - non-jQuery slider. Google loves it - fast and simple.
See it live on


that’s cool
did you suggest man who built theme to change it like that, in repo :D

btw I noticed that you use site search plugin. doesnt ghost now support site wide search without one?
just checking, maybe you can remove it :v:

Thank you, yes I made a pull request to Fizzy theme, massive headache trying to get Bulma.js to behave, it has some kind of mystery built-in breakpoints - thinking the author would be the right person to sort it out ;)

SearchInGhost works really well with the search-box in navigation bar - without jQuery. The only thing I want to figure out is how to get the search activated from clicking the magnifying glass - this still uses jQuery…

1 Like

bulma js?

thats some custom js file. probably from theme author since bulma is just css framework.

about SearchInGost - I meant - doesnt Ghost now offer search included, so that’s no longer needed?
or does Ghost search still lack?

Sry, Bulma CSS it is, my bad. I’m looking for a theme with Tailwind CSS … Yes, Ghost has search, SodoSearch I believe, but it didn’t integrate well with the Fizzy-theme which is a few years old. /m