2017-03-27 156 views
0

我想创建一个自动滑动引导轮播,实际上工作正常。但我努力让菜单看起来像这里这个例子:引导轮播内导航斗争

enter image description here

到目前为止,这是代码。我需要更改/添加什么来让导航看起来像这个例子?而我不想在中间放置引导转盘的小圆点。你知道如何去除它们吗?

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

回答

1

只有small circels of the bootstrap carousel删除 简单的方法来添加样式display:nonecarousel-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>

+0

OUH完蛋了!忘记删除班级“轮播指标”。谢啦! –

+0

欢迎@KrystianManthey .. –