Highlighted

control transition color in an img slider?

Enthusiast ,
Dec 03, 2017

Copy link to clipboard

Copied

The transitional color overlay that helps fade in each image in a slider happens to be a dark gray. I am unsure how I can adapt that to be white.

.slider {

  padding-bottom: 0;

  margin-bottom: -1px;

  background: #ffffff;

  border: none;

  box-shadow: none;

}

<script>

var slideIndex = 0;

showSlides();

function showSlides() {

    var i;

    var slides = document.getElementsByClassName("slider");

    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {

       slides.style.display = "none"; 

    }

    slideIndex++;

    if (slideIndex > slides.length) {slideIndex = 1}   

    for (i = 0; i < dots.length; i++) {

        dots.className = dots.className.replace(" dotActive", "");

    }

    slides[slideIndex-1].style.display = "block"; 

    dots[slideIndex-1].className += " dotActive";

    setTimeout(showSlides, 6000); // Change image every 6 seconds

}

</script>

Not even sure where it is pulling the gray color in. Any recommendations I will try.

Thanks.

Views

172

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

control transition color in an img slider?

Enthusiast ,
Dec 03, 2017

Copy link to clipboard

Copied

The transitional color overlay that helps fade in each image in a slider happens to be a dark gray. I am unsure how I can adapt that to be white.

.slider {

  padding-bottom: 0;

  margin-bottom: -1px;

  background: #ffffff;

  border: none;

  box-shadow: none;

}

<script>

var slideIndex = 0;

showSlides();

function showSlides() {

    var i;

    var slides = document.getElementsByClassName("slider");

    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {

       slides.style.display = "none"; 

    }

    slideIndex++;

    if (slideIndex > slides.length) {slideIndex = 1}   

    for (i = 0; i < dots.length; i++) {

        dots.className = dots.className.replace(" dotActive", "");

    }

    slides[slideIndex-1].style.display = "block"; 

    dots[slideIndex-1].className += " dotActive";

    setTimeout(showSlides, 6000); // Change image every 6 seconds

}

</script>

Not even sure where it is pulling the gray color in. Any recommendations I will try.

Thanks.

Views

173

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 03, 2017 0
Adobe Community Professional ,
Dec 03, 2017

Copy link to clipboard

Copied

Sorry, as long as you persist in showing us just parts of your code, I will not even bother to answer.

In the above, I can only assume that there are style rules within the class names of dot and dotActive, code that we are not privvy to.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2017 0