異なるカルーセルのnavbarフォントの色を変更してください

Question

私はこの問題をどのように処理するのか本当に分かりません。

私はこのプロジェクトでフルページスライダー（ホームページ）を持っています。スライダーの中には5つのアイテムがあります。

最初のスライド/カルーセルアイテムのナビゲーションバーのテキストの色を変更したいと思います。残りは同じように見えます。最初は灰色で、最後の4つのスライドではナビゲーションバーのテキストが白くなります。

私も（私はこの仕事をする2つのPNG画像を持っている。最初のスライドの上に、それは灰色であるべきで、最後の4枚のスライド上で、それはまた、白でなければなりません。）ナビゲーションバー内のロゴを変更したい

をここ2枚の写真は私がやりたいものを証明するために、次のとおりです。 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> 

は、あなたが私を助けることができる方法これを起動しますか？

ありがとうございます！

Answer 1

あなたがしようとしているのはfullPage.jsに似ていますが、フルページスライダーが可能で、基本的なCSSを使用して、色の変更機能を実装できると思います。 http://alvarotrigo.com/fullPage/#firstPage

Answer 2

.carousel-インナー> .item：第一子のH2 {色：黒;}：https://github.com/BlackrockDigital/startbootstrap-full-slider

の色を変更する

Answer 3

私は、これはあなたが使用しているスライダーであると仮定しています最初のスライドのテキストは問題ではありません（下記の例を参照）。しかし、私はこのスライダーがそれが何のスライドを返すコールバック関数を持っているとは思わない。これは、あなたがいるスライドに応じて、ナビゲーションバーのフォント色を変更するために必要となります。だから私はあなたがこれを行うことを可能にする別の全面的なスライダを探す必要があると思います。正確

/* 
 
* 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>