Update the CSS property according to the selected list item in the slider using Glider JS

Looking to dynamically change the background image in CSS based on the active slide value in Glider.js

Here is the CSS:

html { 
  background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

I am using Glider.js, so when the current slide is in frame, the class glide__slide--active is added to the <li> element.

<div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage1.jpg">01</li>
      <li class="glide__slide glide__slide--active" data-image-value="https://bob.com/image/bigimage2.jpg" >02</li>
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage3.jpg">03</li>
    </ul>
</div>

Therefore, I need to update the URL of the background image using jQuery with the value from data-image-value.

javascriptjquerycss

Answer №1

To access the GlideJS Event API, follow this link. 

$(document).ready(function() {
  var glide = new Glide('.glide')

  // When movement transition ends, execute this function
  glide.on('move.after', function() {
    // Get the active slide and save its data-image value 
    const imageSrc = $('.glide__slide--active').attr('image');

    // Set the background to be the image
    $('html').css('background-image', 'url(' + imageSrc + ')');
  })

  glide.mount()
});
html {
  background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage1.jpg">01</li>
      <li class="glide__slide glide__slide--active" data-image-value="https://bob.com/image/bigimage2.jpg">02</li>
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage3.jpg">03</li>
    </ul>
  </div>
</div>

Answer №2

As outlined in the events section of the glidejs documentation, you have the ability to monitor when transitions end by utilizing the following code snippet:

glide.on('move.after', function(event) {
    // save the background image value into a variable
    var newBG = $('.glide__slide--active').attr('data-image-value');
    // set the background image to your desired element (html or body... depending on your setup)
    $('body').css('background-image', 'url(' + newBG + ')');
});

Providing a reproducible example would greatly assist in offering more tailored guidance and assistance.

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

Is it possible to use JavaScript to retrieve a client's bookmarks with their consent?

Is there a way to streamline the process of importing bookmarks to my server for users? Can I use JavaScript to automatically retrieve a user's bookmarks, or is that not possible due to security concerns in browsers? ...

javascriptajaxbrowserbookmarks

Leverage access tokens in React.js frontend application

After successfully creating an authentication API using Nodejs, Expressjs, MongoDB, and JWT, I am now working on a small frontend application with React-js specifically for Sign-up and Sign-in functionalities. While I have managed to integrate the Sign-up ...

javascriptnode.jsexpressjwt

Guide to altering the characteristics of a button

Here is the code for a button within My Template: <div *ngFor="let detail of details" class = "col-sm-12"> <div class="pic col-sm-1"> <img height="60" width="60" [src]='detail.image'> </div> <div ...

javascriptangularjsangular

Vue randomly sets the prototype of props in its definition

When the same code with the identical data structure is passed to the prop, it randomly sets the prop as an array or an object. The following is the code fragment: const props = defineProps({ all: { type: Array, default: [], } }) ...

javascriptlaravelvue.jsinertiajs

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

htmlcsshover

Are there any CSS attribute configurations that I am overlooking?

Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...

css

Transform your scene into a stunning 3D texture using THREE.js's 3D Render Targets feature

After exploring the THREE.js example available here, I am curious about how to avoid scenes rendered as textures from appearing 'flattened'. Essentially, I want to maintain the depth illusion within the scene when using a WebGLRenderTarget. I ha ...

javascriptthree.jswebgl

What is the process for testing and executing the code I've written on ACE Cloud 9?

I have integrated ACE on my website to enable users to code freely. My question is, how can I execute the Python code they write? I want to add a run button in the bottom left corner (which I can style using CSS), but I'm not sure how to actually run ...

javascriptphppythonvbscriptcloud9-ide

Precise column measurement

I'm currently working on a jQuery project where I need to create a table with columns of exact widths. For example, let's say I want the first column to be exactly 100px wide, including padding (10px on each side). I've tried various combin ...

jquerycss

Adjust the width of every column across numerous instances of ag-grid on a single webpage

I am facing an issue with Ag-grid tables on my webpage. I have multiple instances of Ag-grid table in a single page, but when I resize the browser window, the columns do not automatically adjust to the width of the table. We are using only one Ag-grid in ...

javascriptjqueryag-gridag-grid-angular

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

cssinternet-explorer-7

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

javascripthtmlcsstabulator

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

javascriptjquerycss

Like button on Facebook within an unordered list (<ul>)

I'm having a headache with the Facebook button. I'm attempting to include all social buttons in one unordered list with "display: inline;" set on the list item elements. Check out the code below: <ul id="social" class="grid_3 alpha"> & ...

cssfacebookiframe

What are the options for app directory routing and programmatic navigation in the upcoming 13 application

I am currently working on a project called Next 13 that involves using the app directory and MUI 5. The project's structure is organized as follows: ./src ./src/app ./src/app/dc ./src/app/dc/admin ./src/app/dc/admin/dc_types.jsx However, when I try t ...

javascriptnext.jsmaterial-ui

Is it possible to enable unknown keys for multiple schema objects simultaneously using Joi Validation?

I have a multitude of validator files each containing nearly a hundred schema objects. My goal is to validate unknown keys for all of them simultaneously. I've managed to figure out how to do it for a single object, as shown below. Is there a way to a ...

javascriptnode.jsexpressjoi

Getting callback data from a function in the AWS SDK without using asynchronous methods

I have a code snippet that fetches data from AWS using a function: main.js const { GetInstancesByName } = require("./functions"); var operationmode = "getinstances"; if (operationmode == "getinstances") { let getresult = ...

javascriptnode.js

Why does updating state lead to a re-rendering loop while setting state does not encounter the same issue?

Essentially, I have developed a REST Api that retrieves a list of components (sections) from a CMS along with their associated data. Each section in the UI is assigned a number to indicate its position, but certain sections are excluded from counting, such ...

javascriptvue.jsnuxt.js

Populate User Interface Popover - Placement on Compact Display

I have been grappling with finding a solution to position the material ui popover beneath my anchor consistently, even on smaller screens. Take a look at this sandbox example. The current setup is working alright, but the issue is that the scroll is cont ...

cssreactjsmaterial-ui

Identifying and capturing changes in child scope events or properties in Angular

I am encountering an issue with my form directive where I need to intercept ng-click events nested within varying child scopes of the form element. However, I am struggling to hook into these events or child scope properties in a generic way. For demonstr ...

javascriptangularjsangularjs-scope