2017-09-08 4 views
-1

Mein Client hat Bootstrap-Vorlage. Ich machte einen Schieberegler dort: SliderBootstrap Karussell mit Hintergrund

Bilder mooving nur in Laptop. Ich möchte eine Beschreibung auf der rechten Seite des Laptops hinzufügen (Jetzt gleitende Beschreibung funktioniert nicht). Und habe keine Ahnung, wie es geht. Versucht viele Variationen. Oder besser und schneller nur Schieberegler selbst zu schreiben, nicht mit Bootstrap?

Wir freuen uns auf jede Hilfe!

html:

<!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/people.png" alt=""> 
    </div> 

    <div class="item"> 
     <img src="images/people.png" alt=""> 
    </div> 

    <div class="item"> 
     <img src="images/people.png" alt=""> 
    </div> 
    </div> 

    <div class="carousel-description current"> 
    <div>Отчёт по результатам обследования в форме документа в PS QUASTIO PRO</div> 
    </div> 
    <div class="carousel-description"> 
    <div>Отчёт по результатам обследования в форме документа</div> 
    </div> 
    <div class="carousel-description"> 
    <div>Отчёт по результатам обследования</div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

CSS:

#myCarousel{ 
    height: 510px; 
    background: url(../images/computer.png) no-repeat; 
    background-size: 1350px auto; 

} 

#myCarousel .carousel-inner{ 
    width: 441px; 
    height: 250px; 
    position: absolute; 
    left: 225px; 
    top: 24px; 
} 

.carousel { 
    margin-bottom: 0; 
} 

#myCarousel .carousel-inner .item img{ 
    width: 441px; 
    height: 250px; 
} 

.carousel-description{ 
    display: none; 
    width: 25%; 
    position: absolute; 
    right: 150px; 
    top: 185px; 
    font-size: 20px; 
} 

.carousel-description.current{ 
    display: block; 
} 

Antwort

0

Sie meinen Code verwenden können, die jede Bibliothek verwenden tut und ist ähnlich dem pic Sie angebracht, nur die Bilder Weg von CSS ändern. können Sie die Geschwindigkeit von Dias die Steuerung von variablen yourinterval Ändern

var yourinterval=2000; 

DEMO: http://jsbin.com/xegufazuyi/2/edit?html,css,js,output