renderBxContentSlider

Seven49Cms.renderBxContentSlider(urlToRssFeed,params);

• urlToRssFeed: Syndication/Rss.aspx?rssFeed=HomeSlider&c1=409&c2=1968&includeEncodedContent=1&sort=Rank%20DESC
• params {} - defaults:
  • container: “#slider”, // Container, in welchen der bxSlider eingefügt wird
  • initClass: “bxslider”, // Klasse, mit welchem der Slider initialisiert werden soll
  • slidesContainerTag: “ul”, // Slide - Container Element
  • slideContainerTag: “li”, // Einzelner Slide Container bzw Listenelement
  • slideClass: “sliderItem”, // CSS Klasse auf slideContainerTag
  • heading: true, // Wenn true, wird .ContentTitle verwendet im Content Teil
  • firstPanel: “img”, // wenn fullWidthImage = false, wird hier bestimmt, welches Element zuerst verwendet wird (möglich “img” für Bild oder irgendetwas anderes für Text/Content)
  • imgClass: “img”, // CSS Klasse für das Bild-umschliessende Element
  • textClass: “text”, // CSS Klasse für das Text/Content umschliessende Element
  • panelContainerClass: “Slide”, //CSS Klasse für das div, welches als Bild/Content umschliesst (als erstes Child von slideContainerTag)
  • fullWidthImage: false, // Wenn true, wird der Text/Content in das den Bildcontainer gerendert
  • overlaySpan: false, // Zusätzliches Element als letztes Element vor dem schliessenden div.panelContainerClass
  • bxsliderConfig: { auto: true, autoControls: true, mode: ‘fade’ } // bxSlider Konfiguration

Beispiel

input:

<div id="slider" class="Slider"></div> <script> $(document).ready(function() { Seven49Cms.renderBxContentSlider(“Syndication/Rss.aspx?rssFeed=HomeSlider&c1=409&c2=1968&includeEncodedContent=1&sort=Rank%20DESC”,{overlaySpan: true,fullWidthImage: true,bxsliderConfig:{auto: true,autoControls:false, mode:“fade”, adaptiveHeight: true, pager: false}}); }); </script>

output:

<div id="slider" class="Slider">
  <div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;">
     <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 270px;">
       <ul class="bxslider" style="width: auto; position: relative;">
          <li class="sliderItem sliderItem1" style="float: none; list-style: none; position: absolute; display: none; width: 848px; z-index: 0;"><div class="Slide"><div class="img"><img class="" src="https://help.seven49.net/Images/samples/xyz-sample-3.jpg" alt="slider sample 3" width="848" height="270"><div class="text"><div class="ContentItem ObjectsCountXS"><div class="ContentTitle"><h1 id="C31526-Heading" class="ContentTitle">Slide 3</h1></div><div id="C31526-Text1" data-object-id="80905" class="Text Text1 lastText lastChild"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div> </div></div></div><span class="overlay"></span></div></li>
        <li class="sliderItem sliderItem2" style="float: none; list-style: none; position: absolute; width: 848px; display: none; z-index: 0;"><div class="Slide"><div class="img"><img class="" src="https://help.seven49.net/Images/samples/xyz-sample-2.jpg" alt="slider sample 2" width="848" height="270"><div class="text"><div class="ContentItem ObjectsCountXS"><div class="ContentTitle"><h1 id="C31525-Heading" class="ContentTitle">Slide 2</h1></div><div id="C31525-Head1" data-object-id="17645" class="Head Head1 lastHead"><h2>Test Title</h2></div><div id="C31525-Text1" data-object-id="80903" class="Text Text1 lastText lastChild"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div> </div></div></div><span class="overlay"></span></div></li>
         <li class="sliderItem sliderItem3" style="float: none; list-style: none; position: absolute; width: 848px; display: list-item; z-index: 50;"><div class="Slide"><div class="img"><img class="" src="https://help.seven49.net/Images/samples/xyz-sample-1.jpg" alt="slider sample 1" width="848" height="270"><div class="text"><div class="ContentItem ObjectsCountXS"><div class="ContentTitle"><h1 id="C31523-Heading" class="ContentTitle">Slide 1</h1></div><div id="C31523-Head1" data-object-id="17644" class="Head Head1 lastHead"><h2>Test Title 2</h2></div><div id="C31523-Link1" data-object-id="27594" class="Link Link1 lastlink lastLink lastChild"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a href="http://xyz.seven49.net/de/path/doc.htm" class="htm" target="_self">Link</a></div> </div></div></div><span class="overlay"></span></div></li>
      </ul>
    </div>
  <div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div></div> </div>
</div>