bootstrap 轮播中的导航斗争

Question

我正在尝试创建一个自动滑动 bootstrap 旋转木马，实际上效果很好。但我正在努力让菜单看起来像这里的这个例子：

到目前为止，这是代码。我必须更改/添加什么才能使导航看起来像示例？而且我不想在中间放置 bootstrap 旋转木马的那些小圆圈。你知道如何删除它们吗？

.leistungBackground {
  background: #2E492B;
  color: white;
  padding: 5%;
}

.border {
  border: 1px solid grey;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<div class="col-md-1">
</div>
<div class="col-md-10 border">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-animation="slide" data-easing="swing" data-direction="horizontal" data-slideshowSpeed="4000" data-animationSpeed="500" data-controlNav="false">
    <!-- Navigation -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active" style="display:inline-block"><a href="#Uebersetzungsbuero">&Uuml;bersetzungen</a></li>
      <li data-target="#myCarousel" data-slide-to="1" style="display:inline-block"><a href="#Beglaubigungen">Beglaubigungen</a></li>
      <li data-target="#myCarousel" data-slide-to="2" style="display:inline-block"><a href="#Korrekturlesen">Korrekturlesen</a></li>
      <li data-target="#myCarousel" data-slide-to="3" style="display:inline-block"><a href="#Dolmetschen">Dolmetschen</a></li>
      <li data-target="#myCarousel" data-slide-to="4" style="display:inline-block"><a href="#Website-Uebersetzung">Website-&Uuml;bersetzung</a></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" id="Uebersetzungsbuero">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>&Uuml;bersetzungen</h3>
            <hr>
            <p>&Uuml;bersetzungsdienst Jena - BM-Translations bietet Ihnen &Uuml;bersetzungen in den Fachgebieten Medzin, Technik, Recht und Marketing aus den Sprachen Franz&ouml;sisch, Englisch, Arabisch, Italienisch und Spanisch ins Deutsche sowie aus
              dem Deutschen ins Franz&ouml;sische. Bei weiteren Sprachanforderungen oder anderen Fachgebieten, fragen Sie mich doch gern nach meinem Expertennetzwerk.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Beglaubigungen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Beglaubigungen</h3>
            <hr>
            <p>Beglaubigte Übersetzungen, bspw. für Beh&ouml;rden oder Gerichte, müssen durch einen durch die Landgerichte erm&auml;chtigten Übersetzer ausgeführt werden. Ben&ouml;tigen Sie also eine Beglaubigung, so sind Sie bei mir genau richtig! Denn
              als beeidigte Übersetzerin für die franz&ouml;sische und arabische Sprache liefere ich Ihnen eine amtliche Bescheinigung der Korrektheit einer Signatur oder Kopie.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Korrekturlesen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Korrekturlesen bzw. Proofreadings (Korrektorate & Lektorate)</h3>
            <hr>
            <p>Fehler sind menschlich, und gerade beim Schreiben passiert das all zu oft. Wer seine Texte lediglich selbst redigiert, übersieht meist eine Menge. Ich kenne das sehr gut, da ich auch Texterstellung anbiete und immer mindestens einen Lektor
              gegenlesen lasse. Denn man selbst sieht oft den Wald vor lauter B&auml;umen nicht.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Dolmetschen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Dolmetschen</h3>
            <hr>
            <p>Meine Leidenschaft sind Sprachen im Allgemeinen und im Besonderen die franz&ouml;sische Sprache. So verbringe ich jedes Jahr mehrere Monate im sch&ouml;nen Frankreich und kenne somit Land, Kultur & Sprache (sowie deren Besonderheiten). Daher
              bin ich nun auch bereits seit vielen Jahren erfolgreich als Dolmetscher für Franz&ouml;sisch
              <> Deutsch t&auml;tig.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Website-Uebersetzung">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Website-&Uuml;bersetzung & Website-Lokalisierung</h3>
            <hr>
            <p>Bei mir erhalten Sie Website-Übersetzungen auf h&ouml;chstem sprachlichen Niveau und unter Berücksichtigung internationaler Standards nach dem Muttersprachlerprinzip aus den Sprachen Franz&ouml;sisch, Englisch, Arabisch, Spanisch & Italienisch
              ins Deutsche. Bei der Übersetzung Ihrer Webseiten werden Ihre Vorgaben umgehend und ad&auml;quat umgesetzt. L&auml;nderspezifische sprachliche & kulturelle Besonderheiten werden selbstverst&auml;ndlich eingearbeitet.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<div class="col-md-1">
</div>

Answer 1

仅small circels of the bootstrap carousel删除在 class carousel-indicators

中添加样式 display:none 的简单方法

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
    display: none;
}

.leistungBackground {
  background: #2E492B;
  color: white;
  padding: 5%;
}

.border {
  border: 1px solid grey;
}

.carousel-indicators {
  display: none;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<div class="col-md-1">
</div>
<div class="col-md-10 border">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-animation="slide" data-easing="swing" data-direction="horizontal" data-slideshowSpeed="4000" data-animationSpeed="500" data-controlNav="false">
    <!-- Navigation -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active" style="display:inline-block"><a href="#Uebersetzungsbuero">&Uuml;bersetzungen</a></li>
      <li data-target="#myCarousel" data-slide-to="1" style="display:inline-block"><a href="#Beglaubigungen">Beglaubigungen</a></li>
      <li data-target="#myCarousel" data-slide-to="2" style="display:inline-block"><a href="#Korrekturlesen">Korrekturlesen</a></li>
      <li data-target="#myCarousel" data-slide-to="3" style="display:inline-block"><a href="#Dolmetschen">Dolmetschen</a></li>
      <li data-target="#myCarousel" data-slide-to="4" style="display:inline-block"><a href="#Website-Uebersetzung">Website-&Uuml;bersetzung</a></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" id="Uebersetzungsbuero">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>&Uuml;bersetzungen</h3>
            <hr>
            <p>&Uuml;bersetzungsdienst Jena - BM-Translations bietet Ihnen &Uuml;bersetzungen in den Fachgebieten Medzin, Technik, Recht und Marketing aus den Sprachen Franz&ouml;sisch, Englisch, Arabisch, Italienisch und Spanisch ins Deutsche sowie aus
              dem Deutschen ins Franz&ouml;sische. Bei weiteren Sprachanforderungen oder anderen Fachgebieten, fragen Sie mich doch gern nach meinem Expertennetzwerk.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Beglaubigungen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Beglaubigungen</h3>
            <hr>
            <p>Beglaubigte Übersetzungen, bspw. für Beh&ouml;rden oder Gerichte, müssen durch einen durch die Landgerichte erm&auml;chtigten Übersetzer ausgeführt werden. Ben&ouml;tigen Sie also eine Beglaubigung, so sind Sie bei mir genau richtig! Denn
              als beeidigte Übersetzerin für die franz&ouml;sische und arabische Sprache liefere ich Ihnen eine amtliche Bescheinigung der Korrektheit einer Signatur oder Kopie.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Korrekturlesen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Korrekturlesen bzw. Proofreadings (Korrektorate & Lektorate)</h3>
            <hr>
            <p>Fehler sind menschlich, und gerade beim Schreiben passiert das all zu oft. Wer seine Texte lediglich selbst redigiert, übersieht meist eine Menge. Ich kenne das sehr gut, da ich auch Texterstellung anbiete und immer mindestens einen Lektor
              gegenlesen lasse. Denn man selbst sieht oft den Wald vor lauter B&auml;umen nicht.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Dolmetschen">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Dolmetschen</h3>
            <hr>
            <p>Meine Leidenschaft sind Sprachen im Allgemeinen und im Besonderen die franz&ouml;sische Sprache. So verbringe ich jedes Jahr mehrere Monate im sch&ouml;nen Frankreich und kenne somit Land, Kultur & Sprache (sowie deren Besonderheiten). Daher
              bin ich nun auch bereits seit vielen Jahren erfolgreich als Dolmetscher für Franz&ouml;sisch
              <> Deutsch t&auml;tig.</p>
          </div>
        </div>
      </div>

      <div class="item" id="Website-Uebersetzung">
        <div class="row">
          <div class="col-md-6">
            <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=255x10000:format=png/path/s6226916d6715ba5b/image/i163a1867238cf6c1/version/1438331241/image.png" alt="a" height="">
          </div>
          <div class="col-md-6 leistungBackground">
            <h3>Website-&Uuml;bersetzung & Website-Lokalisierung</h3>
            <hr>
            <p>Bei mir erhalten Sie Website-Übersetzungen auf h&ouml;chstem sprachlichen Niveau und unter Berücksichtigung internationaler Standards nach dem Muttersprachlerprinzip aus den Sprachen Franz&ouml;sisch, Englisch, Arabisch, Spanisch & Italienisch
              ins Deutsche. Bei der Übersetzung Ihrer Webseiten werden Ihre Vorgaben umgehend und ad&auml;quat umgesetzt. L&auml;nderspezifische sprachliche & kulturelle Besonderheiten werden selbstverst&auml;ndlich eingearbeitet.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<div class="col-md-1">
</div>

bootstrap 轮播中的导航斗争

navigation-struggle within bootstrap carousel

css

navigation

carousel

twitter-bootstrap