Customize the number of slides in Glide.js after navigating using the controls

I have incorporated a glide JS carousel to display content in a carousel format. The documentation for this repository can be found on their official website as well as on Github.

Here is my current code snippet:

jQuery( window ).load(function() {
  
  var slidesNumber = null;

  if(document.body.classList.contains('single-portfolio')) {
    slidesNumber = 5;
  } else {
    slidesNumber = 4;
  }

  var glide = new Glide('.glide', {
    type: 'carousel',
    perView: slidesNumber,
    autoplay: 4000,
    animationDuration: 1000,
    focusAt: 1
  })
  
  glide.mount()
});

My goal is to customize the number of steps (slides) when the next or previous buttons are clicked. The current behavior only moves one slide at a time, but I want to use my variable (var slidesNumber) to determine this behavior.

I have searched through the documentation but found no information on this specific customization. Is it even possible to achieve this?

Answer №1

The code snippet you shared functions as intended. In my scenario, I am seeing a display of 4 slides due to the absence of that particular class in the body of my document. It might be beneficial to log the variable in the console to confirm the presence of more than 1 slide.

Furthermore, including some HTML code would greatly assist in troubleshooting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Formatting numbers as floating point values in AngularJS

I need a text box where users can enter an amount. The input should be restricted to numbers only, with no special characters or decimal points. I have managed this using custom filters. However, I also need the entered number to automatically display as ...

Loading information into a Mongoose array schema

Currently, I am encountering a conceptual challenge along with a real error. My current project involves developing an inventory module concept that comprises of two models: Inventory Item The Inventory model solely consists of an "items" field, which s ...

Tips for incorporating a set offset while utilizing the scrollTop() function

I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...

React, Redux, Thunk - the trifecta of powerful

After spending a considerable amount of time struggling with this particular piece of code, I have scoured online resources such as Stack Overflow and the documentation, but there is still something that eludes me... The code in question revolves around t ...

Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading. $(window).on("load", function() { $(".loading").fadeOut("slow"); ...

Pair of Javascript Functions Using Async with Parameters

This question builds upon a previous inquiry raised on Stack Overflow: When considering approach number 3 (referred to as the "counter" method), how can we ensure that the function handleCompletion can access necessary data from startOtherAsync to perform ...

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...

Activate tooltip by clicking outside of the dropdown menu

I am experiencing an issue with a tooltip and a dropdown menu. Whenever I interact with the dropdown by clicking outside of it or inside its contents, the tooltip content is triggered again. For example, when I hover over the button, the tooltip triggers ...

Comparing parameters between two functions in Javascript: a step-by-step guide

I am currently working on solving this problem: var name; var totalScore; var gamesPlayed; var player; var score; // Creating the game player object function makeGamePlayer(name, totalScore, ga ...

Tips for converting PDF files to images or reducing PDF file size using JavaScript

In my web application built with Next.js, I have a requirement where users can upload PDF files. However, I need to compress these files to a smaller size (e.g. 1MB). Despite searching extensively, I haven't found a satisfactory solution that meets my ...

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

Assist in troubleshooting and pinpointing the solution to this issue

function generateRandomString(length) { var result = ""; var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"; var charactersLength = characters.length; for (var i = 0; i < length; i++) { result += characters ...

What is the best way to validate if fields are blank before sending a message using the button?

<template> <div> <div class="form-group"> <label for="name">First Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Ente ...

Serve the JS files in Express separately

I am facing issues with my webapp loading too slowly when using the express.static middleware to serve all my js files. I am considering serving each js file only when needed, such as when serving the html from jade that uses the js file. I have attempted ...

Tips for optimizing the use of JS promises?

I'm encountering issues with implementing promises in JavaScript. There are 3 asynchronous functions that rely on each other: The functions are named func1, func2, and func3 respectively. func1 produces a single result that func2 requires. func2 a ...

Issues with expanding all nodes in the Angular Treeview function by Nick Perkins in London are causing difficulties

Currently utilizing the angular treeview project found here: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree After examining the functionality, it seems that this treeview is lacking search capabilities. To address this limitation, I deci ...

What steps can I take to ensure that my Onetrust consent script is properly loaded before implementing Facebook pixel tracking in NextJS?

Looking for a solution to load my Cookies consent script as the first script in our NextJS application. The problem arises because we have Facebook pixel tracking implemented and they use parentNode.insertBefore which places their script on top. This is h ...

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view

After reading similar questions and doing some research on scrollspy, I don't think it will provide the functionality I need. It seems to only support bootstrap style highlighting. If there is more to it that I'm not aware of, please inform me! ...