Slider aus den Medien des Standard-CEs "Text & Medien"

<f:section name="Main">
    <div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
      <f:if condition="{data.frame_class} == 'imageSlider'">
         <f:then>
               <f:render partial="Media/Slider" arguments="{_all}" />
         </f:then>
         <f:else>
            <f:if condition="{gallery.position.vertical} != 'below'">
                  <f:render partial="Media/Gallery" arguments="{_all}" />
              </f:if>
         </f:else>
      </f:if>
        <f:if condition="{data.bodytext}">
            <f:then>
                <div class="ce-bodytext">
                    <f:if condition="{gallery.position.noWrap}">
                        <f:render partial="Header/All" arguments="{_all}" />
                    </f:if>
                    <f:format.html>{data.bodytext}</f:format.html>
                </div>
            </f:then>
            <f:else>
                <f:if condition="{gallery.position.noWrap}">
                    <f:if condition="{data.header}">
                        <div class="ce-bodytext">
                            <f:render partial="Header/All" arguments="{_all}" />
                        </div>
                    </f:if>
                </f:if>
            </f:else>
        </f:if>
      <f:if condition="{data.frame_class} != 'imageSlider'  &&  {gallery.position.vertical} == 'below'">
              <f:render partial="Media/Gallery" arguments="{_all}" />
      </f:if>
    </div>
</f:section>

<f:if condition="{gallery.rows}">
    <div id="imageSlider{data.uid}"
        class="
            ce-gallery
         {f:if(condition: data.imageborder, then: ' ce-border')}
         imageSlider
        "
    >
        <f:for each="{gallery.rows}" as="row">
            <f:for each="{row.columns}" as="column">
                <f:if condition="{column.media}">
                    <div class="slider-item">
                        <f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
                    </div>
                </f:if>
            </f:for>
        </f:for>
     </div>
   <script>
      $(document).ready(function(){
         $('#imageSlider{data.uid}').bxSlider({
            auto: true,
            speed: 800,
            pause: 5000,
            autoControls: true,
            stopAutoOnClick: true,
            pager: true,
            slideWidth: <f:format.raw>{f:if(condition:'{gallery.width}', then: ' {gallery.width}', else: '1200')}</f:format.raw>,
            captions: true,
            autoHover: true
         });
      });
   </script>
</f:if>

details {
   summary {
      background: $hellorange;
      border-radius: 3px;
      cursor: pointer;
      padding: 0 6px;
      text-decoration: none;
      height: auto !important;
      line-height: 36px;
      display:block;
      margin-bottom: 6px;
      position:relative;
      width: 100%;
      text-align: left;
      font-weight: bold;
      @include font-size(18);
      .glyphicon {
         float: left;
         margin: 8px 6px 0 0;
      }
      .glyphicon-chevron-down {
         display:block;
      }
      .glyphicon-chevron-up {
         display:none;
      }
   }
   &[open=''] summary {
      .glyphicon-chevron-down {
         display:none;
      }
      .glyphicon-chevron-up {
         display:block;
      }
   }
}

.expanding-container {
   details > div > header {
      display:none;
   }
}