Add design to an individual element located apart from a slider

Question

Add design to an individual element located apart from a slider

Having a pure CSS slider, I included dot indicators to show the current slide. However, there are also numeric indicators outside of the slider that I want to change the color of.

The CSS code for the working indicators looks like this:

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

Unfortunately, this code does not work for changing the color of the numeric indicators:

input#img-1:checked ~ #title label#slide-link-1,
input#img-2:checked ~ #title label#slide-link-2,
input#img-3:checked ~ #title label#slide-link-3 {
    color: red;
}

If there are more than three slides, the same issue persists. To view the code and problem, check out my codepen here: http://codepen.io/anon/pen/ZbPvde

Is there a way to achieve this using CSS alone, or could you please provide guidance on how to solve it with jQuery? Thank you for your help.

jquery css

Answer 1

Answer №1

Instead of using classes, you are actually utilizing ids, so keep in mind that you can only use #img-dot-1, #img-dot-2, and #img-dot-3 once throughout your entire HTML page. The same rule applies for #slide-link as well. This allows you to access them directly:

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red;
}

If setting the color: red property is still not working, try overriding it with !important like this:

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red !important;
}

This issue could be due to some inner elements interfering with the styling.

I have added a screenshot below to demonstrate the enhanced functionality:

https://i.sstatic.net/gigN5.png

Update: For changing the current slide number as per your requirement, I made the following modifications:

Firstly, I included the following CSS:

.red {
    color: red;
}

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

Next, I assigned values to the checkboxes in this format:

<input type="radio" name="radio-btn" id="img-2" value="2" />

Following that, I incorporated JQuery and the subsequent script to enable the desired functionality:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function select(i)
{
    $("#slide-link-1").removeClass("red");
    $("#slide-link-2").removeClass("red");
    $("#slide-link-3").removeClass("red");
    $("#slide-link-"+i).addClass("red");
}
$("input[type='radio']").change(function()
{
    select($(this).val());
});
</script>

If you wish to start with the color red selected initially, add the following line to the script section:

$("#slide-link-1").addClass('red')

That should take care of it.

Answer 2

Instead of using classes, you are actually utilizing ids, so keep in mind that you can only use #img-dot-1, #img-dot-2, and #img-dot-3 once throughout your entire HTML page. The same rule applies for #slide-link as well. This allows you to access them directly:

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red;
}

If setting the color: red property is still not working, try overriding it with !important like this:

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red !important;
}

This issue could be due to some inner elements interfering with the styling.

I have added a screenshot below to demonstrate the enhanced functionality:

https://i.sstatic.net/gigN5.png

Update: For changing the current slide number as per your requirement, I made the following modifications:

Firstly, I included the following CSS:

.red {
    color: red;
}

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

Next, I assigned values to the checkboxes in this format:

<input type="radio" name="radio-btn" id="img-2" value="2" />

Following that, I incorporated JQuery and the subsequent script to enable the desired functionality:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function select(i)
{
    $("#slide-link-1").removeClass("red");
    $("#slide-link-2").removeClass("red");
    $("#slide-link-3").removeClass("red");
    $("#slide-link-"+i).addClass("red");
}
$("input[type='radio']").change(function()
{
    select($(this).val());
});
</script>

If you wish to start with the color red selected initially, add the following line to the script section:

$("#slide-link-1").addClass('red')

That should take care of it.

Add design to an individual element located apart from a slider

Answer №1

Similar questions

Unable to make changes to the data

Modify the text color upon clicking with a TouchableOpacity component

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Gradient in Half Circle With JavaScript

How to modify the font color of weekend dates on jquery datepicker

Resizable item within a text box (similar to an HTML editing tool)

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Creating duplicates of table rows featuring Glyphicon and Bootstrap for an interactive "Data Live Search" dropdown

Painting Magic: Exploring the World of Canvas Zoom and Moves

Flipping a jQuery animation upside down

What causes variations in layouts when using the same CSS grid code across different pages?

The conversion of 'data' to an object in jQuery/Json is not possible

unable to detect image input type

Fancybox may be difficult to spot when using Safari

Verify if the username is present in the database using AJAX

Struggling to connect the Calendar data in AngularJS

Error 500 encountered during the AJAX request

Problem with the transform attribute in CSS

Tips for stopping table column width growth when an icon is inserted into a cell dynamically

Ensuring that two columns in Bootstrap 3 have equal heights while including padding