ich dieses seltsame Problem konfrontiert bin, folgen Sie bitte den Rest:Bootstrap Carousel bricht HTML-Layout mit XSLT auf Sharepoint
1- Ich habe diesen statischen Karussell HTML-Code: (die auf Browser arbeiten)
<div class="Awareness-section no-padding col-md-12 col-sm-12 col-xs-12">
<div id="Awareness-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#Awareness-carousel" data-slide-to="0" class="active">1</li>
<li data-target="#Awareness-carousel" data-slide-to="1">2</li>
<li data-target="#Awareness-carousel" data-slide-to="2">3</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p class="Awareness-title">Awareness 1</p>
<p class="Awareness-desc">Content 1</p>
</div>
<div class="item">
<p class="Awareness-title">Awareness 2</p>
<p class="Awareness-desc">Content 2</p>
</div>
<div class="item">
<p class="Awareness-title">Awareness 3</p>
<p class="Awareness-desc">Content 3</p>
</div>
</div>
</div>
<p class="Awareness-view-all"><a href="">View All</a></p>
</div>
2- Dann habe ich es mit Sharepoint Content Query webpart (XSLT) wie folgt dynamisch:
<xsl:variable name="BeginColumn" select="string('<div id="Awareness-carousel" class="carousel slide"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#Awareness-carousel" data-slide-to="0">1</li><li data-target="#Awareness-carousel" data-slide-to="1">2</li><li data-target="#Awareness-carousel" data-slide-to="2">3</li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox">')" />
<xsl:variable name="EndColumn" select="string('<!-- Left and right controls --><a class="left carousel-control" href="#Awareness-carousel" role="button" data-slide="prev"><span><i class="fa fa-angle-left"></i></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#Awareness-carousel" role="button" data-slide="next"><span><i class="fa fa-angle-right"></i></span> <span class="sr-only">Next</span></a></div><div class="aw-vall"><p class="Awareness-view-all"><a href="/Arabic/Pages/allawareness.aspx">عرض الكل</a></p></div>')" />
dann I hinzugefügt, um es in einer webpart Zone in der Seitenlayout:
<div class="Awareness-section no-padding col-md-12 col-sm-6 col-xs-12">
<WebPartPages:WebPartZone id="AwarenessSection" runat="server" title="Awareness Webpart"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
3- Ich addiere 'aktive' Klasse ersten Indikatoren und Element, und Initialisieren das Karussell manuell in den js :
$('.carousel-indicators li:first').addClass("active");
$('.carousel-inner .item:first').addClass("active");
$('#Awareness-carousel').carousel();
4- Denn das Karussell hat gut funktioniert, aber das hTML-Layout der Seite bricht, ist die Fußzeile g unter dem Container oing:
Bevor das Karussell hinzufügen:
Pl Hilfe erleichtern, wenn jemand eine Ahnung hat, warum dies passiert und welche Lösungen zu versuchen?
Das Problem ist gelöst, alles funktioniert jetzt gut Vielen Dank. –