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

Unlimited scrolling: Fetching additional data via an Ajax request?

I am working on setting up a table with infinite scroll functionality to showcase user information such as name, address, and email. To accomplish this, I began by importing the json-server package and creating an API endpoint using fakerjs in a separate f ...

javascriptjqueryajax

What is the process for invoking a JavaScript function from the code-behind of an Asp.Net application?

Here is a sample of my JavaScript function : function NeedToExport() { alert('Time to export your data!'); } Additionally, in my ASP.NET code behind : Page.ClientScript.RegisterStartupScript(this.GetType(), "ExportKey", "NeedToExport();"); ...

javascriptc#asp.netwebforms

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...

javascripthtmlcssvideoyoutube

Troubleshooting: Issue with v-link to classname in Vue.js

This is the code I am working with: <div v-link="'/work/' + {{data.useClass}}" class="itemImg {{data.useClass}}"> When rendered in the browser, it looks like this: <div class="itemImg x50"> The expectation is that class="itemImg { ...

javascriptvue.js

When attempting to execute a function when a hidden div is not displayed, JQuery encounters an

I'm currently attempting to modify the text color of the h2 title with the id ticketSearchTitle when the ticketSearch div is not visible. However, the code I have been using to achieve this seems to cause issues (such as the absence of a pointer icon ...

jquerycss

VUE JS - My methods are triggering without any explicit invocation from my side

I've encountered a frustrating problem with Vue JS >.<. My methods are being triggered unexpectedly. I have a button that is supposed to execute a specific method, but this method gets executed along with other methods, causing annoyance... Her ...

javascriptformsvue.jsindexeddb

Can a robust web application be developed using Kotlin in Node.js?

With the recent release of Kotlin 1.1, it is now possible to compile Kotlin projects into JavaScript as a target, allowing for full JavaScript compilation. Can a Node.js application, like an express webserver, be developed entirely using Kotlin code? As s ...

javascriptnode.jsexpresskotlinkotlin-interop

Vue 3 Router view fails to capture child's event

After some testing, I discovered that the router-view component in Vue 3 does not capture events sent from its child components. An example of this scenario is as follows: <router-view @event-test="$emit('new-test-event')" /& ...

javascriptvue.jsvuejs3

The issue with Express connect-flash only showing after a page refresh instead of instantly displaying on the same page needs to be addressed

Here is the registration route code snippet: router.post("/register", function(req, res){ var newUser = new User({username: req.body.username}); User.register(newUser, req.body.password, function(error, user){ if(error){ req.fl ...

javascriptnode.jsmongodbexpressconnect-flash

Utilize Jquery to hide radio buttons, while allowing users to click on an image to display a larger version

My current HTML structure is restricted to SAAS, so I only have control over jQuery implementation. https://i.stack.imgur.com/OHB9K.jpg I am attempting to achieve a similar layout as shown in the image below. The main issue lies in how to (1) conceal ...

javascriptjqueryhtml

Issues with integrating chart.js in Laravel 7: Element #app not found?

Currently, I am utilizing chart.js to display the statistics of reviews and messages for a user. However, I have encountered issues with the scripts. While the stats are functioning correctly, an error message stating Cannot find element: #app is appearing ...

javascriptlaravelvue.jschart.js

Utilizing Vue-i18n for language translations directly within a JavaScript file, rather than using

Is there a way to utilize the .js file for translations instead of the .json file? I attempted changing: const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) to const locales = require.context('./loca ...

javascriptvue.jsvue-i18n

validating price ranges with the use of javascript or jquery

<!DOCTYPE html> <html lang="en"> <head> <title>My Page Title</title> </head> <body> <form method="post" action="process-form.php"> Price Range: From <input type="text" id="price-from"> ...

javascriptjqueryvalidation

What could be the reason for the malfunctioning of my express delete request?

When I send a delete request using Postman on my localhost, everything functions correctly. However, when trying to make the same request from my React.js client-side, it doesn't go through. Below is the API request: router.delete("/deletetransaction ...

javascriptreactjsexpressaxios

Tips for implementing HTTP requests in Angular 2 without TypeScript

The demonstrations provided by the angular team only illustrate injecting Http for typescript. https://angular.io/docs/js/latest/api/http/Http-class.html How can this be accomplished in JavaScript? import {Http, HTTP_PROVIDERS} from 'angular2/http& ...

javascriptangularjsangular

Tips for utilizing the jquery columnize plugin in conjunction with AngularJs

I am looking to utilize the columnize plugin from jQuery to create columns in my AngularJS application. Initially, I attempted the following straightforward approach: .directive('columnize', function() { return { restrict: 'A&ap ...

jqueryangularjsmultiple-columns

Unusual Quirk in HTML

I'm having a simple issue that I need help with... Does anyone know how to make the image fill the empty space on the right side of the text? Take a look at this screenshot for reference: Here is the HTML file: And here is the CSS file: dl.drop ...

htmlcss

What is the method for setting a default image to be preloaded in filepond?

Currently, I am working on a Laravel view for editing a record which includes an associated image. My goal is to have the image preloaded inside the input file so that when you submit the form, the same image is sent or you can choose to change it. // Con ...

javascriptjqueryfilepond

What steps do I need to take in order to transform my standard filter form that uses a submit button, into one

Currently, there is a table of venues displayed on the index page. Users can filter these venues by area and type using a form with a submit button that triggers a page reload. After filtering, all the matched venues are shown, and the form automatically ...

ruby-on-railsajaxformsjqueryfilter

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4