<div class="container-fluid" style="overflow:initial">
<div class="centratura-relative">
<div class="under-background"><svg>.......</svg></div>
<div class="over-background dipinto"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" data-colore="#DC143C" src="..." alt="First slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-colore="#800080" src="...." alt="Second slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-colore="#ffd700" src="...." alt="Third slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
</div>
<a class="carousel-control-prev no-back" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next no-back" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div></div>
</div>
</div>
</section>
$('#carouselExampleIndicators').on('slide.bs.carousel', function () {
$('.cls-3').css("fill","red");
})
If I have a SVG img not in the carousel and when I click on a carousel I want that SVG fill change. How can I do this? with data target on hte items of carousel? Please help me. The carousel is a bootstrap carousel. I have to do this change color for all items in the carousel. i want to do this for every items with differents color
assuming you may override the fill property this should work
$('.carousel').carousel();
$('.carousel').on('slide.bs.carousel', function(ev) {
var slide = $(ev.relatedTarget);
var svgColor = slide.data('colore');
$('.cls-3').css("fill", svgColor);
});
Example (automatic slide, see the demo in full page, scroll down to see the SVG)
$(function() {
$('.carousel').carousel();
$('.carousel').on('slide.bs.carousel', function(ev) {
var slide = $(ev.relatedTarget);
var svgColor = slide.data('svgcolor');
$('.cls-3').css("fill", svgColor);
});
});.cls-3 {
width: 200px;
height: auto;
fill: #9bc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-svgcolor="#9bc">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item" data-svgcolor="#cb9">
<img
src="https://mdbootstrap.com/img/new/slides/042.jpg"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item" data-svgcolor="#c9b">
<img
src="https://mdbootstrap.com/img/new/slides/043.jpg"
class="d-block w-100"
alt="..."
/>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="cls-3">
<path d="M348,327.195v-35.741l-32.436-11.912c-2.825-10.911-6.615-21.215-12.216-30.687l0.325-0.042l15.438-32.153l-25.2-25.269
l-32.118,15.299l-0.031,0.045c-9.472-5.601-19.758-9.156-30.671-11.978L219.186,162h-35.739l-11.913,32.759
c-10.913,2.821-21.213,6.774-30.685,12.379l-0.048-0.248l-32.149-15.399l-25.269,25.219l15.299,32.124l0.05,0.039
c-5.605,9.471-11.159,19.764-13.98,30.675L50,291.454v35.741l34.753,11.913c2.821,10.915,7.774,21.211,13.38,30.685l0.249,0.045
l-15.147,32.147l25.343,25.274l32.188-15.298l0.065-0.046c9.474,5.597,19.782,10.826,30.695,13.652L183.447,460h35.739
l11.915-34.432c10.913-2.826,21.209-7.614,30.681-13.215l0.05-0.175l32.151,15.192l25.267-25.326l-15.299-32.182l-0.046-0.061
c5.601-9.473,8.835-19.776,11.66-30.688L348,327.195z M201.318,368.891c-32.897,0-59.566-26.662-59.566-59.565
c0-32.896,26.669-59.568,59.566-59.568c32.901,0,59.566,26.672,59.566,59.568C260.884,342.229,234.219,368.891,201.318,368.891z"/>
</svg>