Glide, a pure JS image slider! No more jQuery

Themes
1

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 https://glidejs.com/

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|}}
   <script>                                        
      var sliderItems = {{posts.length}};
   </script>
<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}}">
               </a>                                         
           </li>
         {{/foreach}}
         </ul>                          
     </div>
     <div id="glideButtons" class="glide__bullets" data-glide-el="controls[nav]"></div>                            
</div>
{{/get}}

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);                                    
           document.getElementById("glideButtons").appendChild(buttonWrapper);                                     
                }           
   </script>

Initialize from default.hbs - .mount() executes

    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide" ></script>   

    <script>        
        window.addEventListener('load', function(){
        new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 1,
        autoplay: 2000,
        hoverpause: true,
        }).mount();
        })
    </script>

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css">

… and that’s it - non-jQuery slider. Google loves it - fast and simple.
See it live on https://magnushelander.se/

4 Likes
2

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:

3

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
4

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?

5

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