Change the body class depending on the current slide with Cycle2

Question

Change the body class depending on the current slide with Cycle2

Welcome fellow developers,

I am in need of a little guidance as I am struggling to find a starting point. Please excuse my lack of working code for this issue.

I have searched far and wide on the web, but I can't determine if the solution to my problem is simple or if it requires some specialized knowledge.

Current Scenario: I have chosen Cycle2 as my slider plugin (and I strongly prefer sticking with it - switching to another slider would be challenging for me). Each slide will be assigned a specific "colour" class along with a 'slide' class.

What I'm Looking For: I want to switch classes on the <body> element based on the active slide's colour class.

Ideas: I haven't decided on a naming convention for the colour classes yet, but I am considering something like .col-[name] where [name] could be yellow, red, etc. So, when the active slide has the class col-yellow, this class should be added to the <body>, allowing me to apply different background styles (CSS) to the body element.

If the active slide changes its colour class to something like col-red, then the <body> class should match accordingly.

I hope this explanation is clear and that someone out there in the Stack Overflow community can assist me with this challenge.

Thank you for taking the time to read through my query!

jquery css dom jquery-cycle2

Answer 1

Answer №1

I recently provided a solution to a similar question not too long ago.

Check out this demonstration: http://jsfiddle.net/kevinPHPkevin/7VzaQ/3/

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
var bg = $(incomingSlideEl).find('img').css('backgroundColor');
$('body').css('background', bg);
});

I hope this information is helpful.

[edited] I have made changes to the code so that it now assigns the same class to the body as the active slide's class.

Demonstration of edited code: http://jsfiddle.net/kevinPHPkevin/7VzaQ/4/

To clarify my changes - In the initial code snippet, I created a variable named 'bg' which stored the CSS background color of the active slide. I then applied this variable as the background of the body tag. However, as per your request for a class change rather than just a style change, I modified the code to identify and assign the class attribute instead of the CSS background color.

Original 'Var' Snippet:

var bg = $(incomingSlideEl).find('img').css('backgroundColor');
    $('body').css('background', bg);

Modified 'Var' Snippet:

var bg = $(incomingSlideEl).find('img').attr('class');
$('body').attr('class', bg);

Answer 2

I recently provided a solution to a similar question not too long ago.

Check out this demonstration: http://jsfiddle.net/kevinPHPkevin/7VzaQ/3/

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
var bg = $(incomingSlideEl).find('img').css('backgroundColor');
$('body').css('background', bg);
});

I hope this information is helpful.

[edited] I have made changes to the code so that it now assigns the same class to the body as the active slide's class.

Demonstration of edited code: http://jsfiddle.net/kevinPHPkevin/7VzaQ/4/

To clarify my changes - In the initial code snippet, I created a variable named 'bg' which stored the CSS background color of the active slide. I then applied this variable as the background of the body tag. However, as per your request for a class change rather than just a style change, I modified the code to identify and assign the class attribute instead of the CSS background color.

Original 'Var' Snippet:

var bg = $(incomingSlideEl).find('img').css('backgroundColor');
    $('body').css('background', bg);

Modified 'Var' Snippet:

var bg = $(incomingSlideEl).find('img').attr('class');
$('body').attr('class', bg);

Change the body class depending on the current slide with Cycle2

Answer №1

Similar questions

The ion-content scrolling directive is failing to show any displayed information

Explore and Conceal Images with Jquery

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

Using JQuery to assign text to labels within web controls is a simple and effective way to enhance user interaction and improve

How to Customize Bootstrap 4 Form Styles

The issue with using the jQuery blur() event on a Div element

The Bootstrap 4 navigation bar item unexpectedly jumps below and then wraps around

Tips for condensing text using ellipsis and Angular-FlexLayout

Spacing between cards using Bootstrap

Sending information from a webpage to an application in Express

Using jQuery Ajax in ASP.NET MVC to send arguments from JavaScript via POST requests

Does Material-ui v4 display component names within the class attributes of the html DOM?

PHP dropdown menu is a dynamic feature that provides users

Using nested jQuery .each to append content to a specific class

Is there a way to update a model value based on a button press in the view?

The absence of a semi-colon in JSLint

Is there a way to automatically refresh the woocommerce checkout page every 20 seconds?

Retrieve JSON data from a PHP script

Ways to enhance the maxDate functionality in a jQuery datepicker

When external API validation fails, the JavaScript form is submitted