2017-12-19 1 views
1
<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" /> 
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" > 
    <!-- Wrapper for slides --> 
    <div id="myNewCar" class="carousel-inner" style="height: 100%; "> 
     <div class="item active"> 
      <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" /> 
     </div> 

     <div class="item"> 
      <img src="~/assets/images/sidebar-1.jpg" class="img-responsive" /> 
     </div> 

     <div class="item"> 
      <img src="~/assets/images/sidebar-5.jpg" class="img-responsive" /> 
     </div> 
    </div> 

</div> 
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script> 
<script src="~/assets/js/core/bootstrap.min.js"></script> 

ich Bootstrap-Karussell in meiner asp.net MVC Teilansicht verwenden aber die Bilder in dem Schieber gleitet es zeigt nicht nur das erste BildBootstrap Karussell funktioniert nicht (Sein Gleiten nicht)

+0

Sehen Sie einen Fehler in der Konsole (Chrom Entwickler-Tool)? –

+0

Ja, es gibt viele Fehler in der Konsole – Warda

+0

Welche Javascript-Code? – Warda

Antwort

1

Bootstrap 4 geändert .item bis .carousel-item. Aktualisieren Sie Ihren HTML-Code, um die Migration von BS3 zu BS4 zu berücksichtigen, und Ihr Karussell funktioniert wie erwartet. So ändern:

<div class="item active"> 
    <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" /> 
</div> 

zu:

<div class="carousel-item active"> 
    <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" /> 
</div> 

und wiederholen Sie für jede Iteration der Folien. Weitere Informationen über die Bootstrap 4s Referenz Carousel Komponente der Dokumentation für die aktuelle Version (4.0.0-beta2):

https://getbootstrap.com/docs/4.0/components/carousel/

Verwandte Themen