Ich benutze Clycle2 Bild-Slider in meiner Website. Ich möchte den Style im Cycle-Overlay ändern. Ich kann die Schriftgröße ändern. Aber mit CSS kann ich die Schriftfarbe nicht ändern. Es gibt mir immer graue Farbe. Bitte hilf mir dabei.Wie ändert man die Schriftfarbe in cycle2 cycle-overlay
#us-img-container{
margin: 0px;
padding: 0px;
cursor: pointer;
}
#us-container{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
background: #fff;
}
#us-slideshow{
width: 100%;
}
#us-slideshow img{
width: 100%;
}
#us-pager{
height: 70px;
width: 100%;
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
opacity: 0;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-slideshow:hover + #us-pager{
opacity: 1;
}
#us-pager:hover {
opacity: 1;
}
#us-prev{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 15px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-next{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 10px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-pager img{
height: 60px;
width: 95px;
margin: 5px 5px;
opacity: 0.5;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-pager img:hover{
opacity: 1;
transform: scale(1.05);
z-index: 100;
}
/* overlay */
.cycle-overlay {
font-family: NotoSans-Regular !important;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
z-index: 600;
padding: 7px 7px 7px 10px;
background-color: rgba(0, 0, 0, 0.1) !important;
font-size: 16px;
color: rgba(255, 255, 255,1) !important;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cycle-slideshow:hover .cycle-overlay{
bottom: 70px !important;
}
/*
media queries
some style overrides to make things more pleasant on mobile devices
*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.cycle-slideshow { width: 200px;}
.cycle-overlay { padding: 4px }
.cycle-caption { bottom: 4px; right: 4px }
}
<div class="col-md-12 col-sm-12 col-xs-12 hide" id="us-img-container">
<div id="us-container" style="">
<div id="us-slideshow" class="cycle-slideshow"
data-cycle-fx = "fade"
data-cycle-speed = "600"
data-cycle-timeout = "3000"
data-cycle-pager = "#us-pager"
data-cycle-pager-template = "<a herf= '#'><img src='{{src}}' height= 100 width=150 />"
data-cycle-next = "#us-next"
data-cycle-prev = "#us-prev"
data-cycle-manual-fx = "scrollHorz"
data-cycle-manual-speed = "400"
data-cycle-pager-fx = "fade"
data-cycle-caption-plugin=caption2
data-cycle-overlay-fx-out="slideUp"
accesskey=""data-cycle-overlay-fx-in="fadeOut"
>
<?php
$x = 1;
while ($x < 8) {
?>
<script>
$.ajax({
url: '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg', //or your url
success: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg';
},
error: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_DEFAULT; ?>';
}
});
</script>
<img src="" id="slider_<?php echo $x; ?>" onclick="goToDownloads(<?php echo $slider_json[$x]['dn_id']; ?>)"
data-cycle-desc="<?php echo $recent_json[$x]['dn_title']; ?> - <?php echo $slider_json[$x]['artist_name']; ?>" >
<div class="cycle-overlay" style="color: red; "></div>
<?php
$x++;
}
?>
</div>
<div id="us-pager"></div>
<div id="us-prev"><i class="fa fa-angle-left" aria-hidden="true" style="font-size: 26px; color: #000;"></i></div>
<div id="us-next"><i class="fa fa-angle-right" aria-hidden="true" style="font-size: 26px; float: right; color: #000;"></i></div>
</div>
</div>
Bitte können Sie Code bereitstellen Schnipsel von dem, was Sie zu tun versuchen. –
@shubhamkhandelwal Ich füge Code zur Frage hinzu. Bitte gehen Sie diesen Code durch und geben Sie mir eine Lösung. –