Navbar Schriftfarbe ändern auf verschiedenen Karussells

Question

Ich weiß wirklich nicht, wie Sie mit diesem Problem umgehen, also bitte helfen Sie mir!

Ich habe einen ganzseitigen Schieberegler (auf der Homepage) in diesem Projekt. Innerhalb des Schiebers habe ich 5 Gegenstände mit verschiedenen Bildern.

Ich möchte die Farbe der Navbar Text auf der ersten Folie/Karussell Artikel ändern und der Rest kann gleich aussehen. Zuerst sollte grau sein und auf den letzten 4 Folien sollte der Navbar-Text weiß sein.

Ich mag auch das Logo in der Navigationsleiste ändern (auf der ersten Folie es grau sein sollte und auf den letzten 4 Dias soll es weiß auch sein. Ich habe 2 pngs diese Arbeit zu tun.)

hier sind zwei Bilder zu zeigen, was ich tun möchte: slider1 slider2 (rest of sliders)

HTML:

<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="navbarmargin container-fluid"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span><img src="muszerfal_elements/img/menu2.png" style="max-width: 38px; padding-right: 4px; margin-top: 6px;"/> 
      </button> 
      <a class="navbar-brand page-scroll" href="index.html"> 
       <img class="logo" src="img/final_2.png"> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > 
      <ul class="navbartext nav navbar-nav navbar-right"> 
       <li> 
        <a href="works.html">Works</a> 
       </li> 
       <li> 
        <a href="personal.html">Personal</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<!-- Full Page Image Background Carousel Header --> 
<header id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1"></li> 
     <li data-target="#carousel" data-slide-to="2"></li> 
     <li data-target="#carousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_1.jpg');" alt="Slide 1"></div> 
      <div class="carousel-caption caption1"> 
       <h2>Fashion</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_3.jpg');" alt="Slide 2"></div> 
      <div class="carousel-caption caption2"> 
       <h2>Fashion</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_4.jpg');" alt="Slide 3"></div> 
      <div class="carousel-caption caption3"> 
       <h2>Beauty</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_5.jpg');" alt="Slide 3"></div> 
      <div class="carousel-caption caption4"> 
       <h2>Fine Art</h2> 
      </div> 
     </div> 
    </div> 

</header> 

können Sie mir helfen, wie man damit anfangen?

Vielen Dank im Voraus!

Answer 1

Ich denke, dass das, was Sie versuchen, ist ähnlich wie fullPage.js, ermöglicht es für eine ganze Seite Slider und ich glaube, mit einigen grundlegenden CSS können Sie die gewünschte wechselnde Farbfunktion implementieren. http://alvarotrigo.com/fullPage/#firstPage

Answer 2

.carousel-Innen> .item: first-child h2 {color: black;}

Answer 3

Ich gehe davon aus das der Schieber Sie verwenden: https://github.com/BlackrockDigital/startbootstrap-full-slider

Ändern der Farbe der Text auf der ersten Folie ist kein Problem (siehe Beispiel unten). Ich glaube jedoch nicht, dass dieser Schieberegler eine Callback-Funktion hat, die angibt, auf welcher Folie er sich befindet. Dies würde erforderlich sein, um die Schriftfarbe der Navigationsleiste abhängig davon zu ändern, auf welcher Folie Sie sich befinden. Ich denke also, dass Sie nach einem weiteren ganzseitigen Schieberegler suchen müssen, mit dem Sie dies tun können.

/* 
 
* Start Bootstrap - Full Slider (http://startbootstrap.com/) 
 
* Copyright 2013-2016 Start Bootstrap 
 
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) 
 
*/ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.carousel, 
 
.item, 
 
.active { 
 
    height: 100%; 
 
} 
 

 
.carousel-inner { 
 
    height: 100%; 
 
} 
 

 

 
/* Background images are set within the HTML using inline CSS, not here */ 
 

 
.fill { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
footer { 
 
    margin: 50px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <title>Full Slider - Start Bootstrap Template</title> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Navigation --> 
 
    <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
 
    <div class="navbarmargin container-fluid"> 
 
     <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span><img src="http://placehold.it/25x25" style="max-width: 38px; padding-right: 4px; margin-top: 6px;"/> 
 
      </button> 
 
     <a class="navbar-brand page-scroll" href="index.html"> 
 
      <img class="logo" src="http://placehold.it/25x25"> 
 
     </a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="navbartext nav navbar-nav navbar-right"> 
 
      <li> 
 
      <a href="works.html">Works</a> 
 
      </li> 
 
      <li> 
 
      <a href="personal.html">Personal</a> 
 
      </li> 
 
      <li> 
 
      <a href="about.html">About</a> 
 
      </li> 
 
      <li> 
 
      <a href="contact.html">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 

 
    <!-- Full Page Image Background Carousel Header --> 
 
    <header id="carousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel" data-slide-to="1"></li> 
 
     <li data-target="#carousel" data-slide-to="2"></li> 
 
     <li data-target="#carousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for Slides --> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <!-- Set the first background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080/ffffff');" alt="Slide 1"></div> 
 
     <div class="carousel-caption caption1" style="color: grey;"> 
 
      <h2>Fashion (this text is grey)</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the second background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 2"></div> 
 
     <div class="carousel-caption caption2"> 
 
      <h2>Fashion (this text is white)</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the third background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 3"></div> 
 
     <div class="carousel-caption caption3"> 
 
      <h2>Beauty</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the third background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 3"></div> 
 
     <div class="carousel-caption caption4"> 
 
      <h2>Fine Art</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </header> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Script to Activate the Carousel --> 
 
    <script> 
 
    $('.carousel').carousel({ 
 
     interval: 5000 //changes the speed 
 
    }) 
 
    </script> 
 

 
</body> 
 

 
</html>