导航旋转木马内的导航斗争

时间：2017-03-27 04:27:03

标签： css twitter-bootstrap navigation carousel

我正在尝试创建一个自动滑动引导旋转木马，它实际上工作正常。但我在努力让菜单看起来像这样的例子：

enter image description here

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

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

.border {
  border: 1px solid grey;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

仅 small circels of the bootstrap carousel 删除 在课程中添加样式 display:none 的简单方法 carousel-indicators 

.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>

相关问题
最新问题