Image slide with custom background CSS on HTML Wordpress

Question

I wanna ask something about my code here. You can find a demo site

On This Link

And here's the sample Javascript and CSS also HTML that I used on "raw html" code in Wordpress.

JS

  function preview(e) { $("#mklbackground").css("background-color", e.value); } $("#mkl_palette1").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#F7F7F4", "#F8F8F6", "#EAE4DB", "#F2EFE2", "#E2E9ED", "#E7ECEF", "#F6F6F3", "#F4F5F4", "#F7F7F4", "#E8E6DF", "#E7ECED", "#F1EFE6" ], change: preview }); $("#mkl_palette2").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#BAB8B3", "#A8A5A1", "#BDB8B3", "#AEAAA4", "#62676C", "#646C6F", "#67716F", "#C1BAB0", "#ABB7BB", "#BBB8BA", "#C0C4C6", "#B1B8BC" ], change: preview }); $("#mkl_palette3").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#E1C9B1", "#D5BFA8", "#E1C7B1", "#CDB7A2", "#E7C2AD", "#C8AF9E", "#DFBBA8", "#D2B3A5", "#E8BBA4", "#D3B19D", "#E2B7AB", "#CFA599" ], change: preview }); $("#mkl_palette4").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#B44047", "#C74842", "#B7433D", "#DA5C46", "#AC4053", "#B54A6E", "#A95B4E", "#AB5D58", "#B1616C", "#B44047", "#C74842", "#B7433D" ], change: preview }); $("#mkl_palette5").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#F5AC7A", "#F9B98A", "#F8964C", "#DA5C46", "#C97B47", "#EB882A", "#E17238", "#E5713F", "#F79844", "#FFAF41", "#FFA943", "#FEA04B" ], change: preview }); $("#mkl_palette6").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#FADE76", "#FBE184", "#E6DE8F", "#FDDB80", "#FBCC78", "#FFD47C", "#FFCA77", "#FED749", "#F0CD57", "#FFCF43", "#F7CE3F", "#E7C450" ], change: preview }); $("#mkl_palette7").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#0C8E76", "#288670", "#2F8173", "#3E756B", "#2C7C7F", "#1B7C8C", "#307788", "#226481", "#B2E2D2", "#A2D3C4", "#A8E2D6", "#9ED9CD" ], change: preview }); $("#mkl_palette8").kendoColorPalette({ columns: 4, tileSize: { width: 30, height: 30 }, palette: [ "#0092C7", "#2E86BE", "#4A81B5", "#5E7AAD", "#577EB1", "#226481", "#4E5476", "#2F5877", "#1B7C8C", "#005C8E", "#265787", "#0071A7" ], change: preview }); $("#picker").kendoColorPicker({ value: "#ffffff", buttons: false, select: preview }); var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mklslide"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.remove("active"); } if(slides[slideIndex-1]){ slides[slideIndex-1].style.display = "block"; } if(dots[slideIndex-1]){ dots[slideIndex-1].className += " active"; } } 

 /* Hide the images by default */ .mklslide { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } 

 <link href="http://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> <div class="demo-section hidden-on-narrow k-content wide"> <div class="slideshow-container"> <div id="mklbackground"> <div class="mklslide fade"> <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/tesinpirasi11.png"> </div> </div> <div id="mklbackground"> <div class="mklslide fade"> <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/dana2.png"> </div> </div> <div id="mklbackground"> <div class="mklslide fade"> <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/dana3.png"> </div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> </div> 

So actually the first images is doing fine. They change the background using a defined colour picker on the right. But I can't make it work on other images. Is there anything I miss here?

I try to dig on the web regarding this but still cannot find any good example and usage for this. Any help would be appreciated.

Answer 1

You are using same ID ( mklbackground ) for 3 divs. You cannot use same Id for multiple elements. Use parent container classname instead of Id in preview method to change the background color.

function preview(e) {
    $(".slideshow-container").css("background-color", e.value);
}

It will work!