Universität Bielefeld

© Universität Bielefeld

Bild-Slider in den Contenbereich einbinden


Code-Schnipsel

Die Element-IDs dürfen im nachfolgenden Quellcode nicht verändert werden. Andernfalls funktioniert der Slider nicht.

<div class="list_carousel breite484">
    <ul id="bildslider">

      <li>
        <img src="/kommunikation/internet/cd/images/1.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Die Universität Bielefeld wurde 1969 mit explizitem Forschungsauftrag und hohem Anspruch an die Qualität einer forschungsorientierten Lehre gegründet.
        </div>
      </li>

      <li>
        <img src="/kommunikation/internet/cd/images/2.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Heute umfasst sie 13 Fakultäten, die ein differenziertes Fächerspektrum in den Geistes-, Natur-, Sozial- und Technikwissenschaften abdecken.
        </div>
      </li>

      <li>
        <img src="/kommunikation/internet/cd/images/3.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Mit rund 24.000 Studierenden in 115 Studienangeboten, ca. 2.750 Mitarbeiterinnen und Mitarbeitern, gehört sie zu den mittelgroßen Universitäten in Deutschland.
        </div>
      </li>

    </ul>

    <!-- Slider-Navigation -->
    <a class="prev" id="bildslider_prev" href="#"><span>prev</span></a>
    <a class="next" id="bildslider_next" href="#"><span>next</span></a>
    <div class="pagination" id="bildslider_pag"></div>

    <div class="clear"></div>

</div> <!-- list_carousel Ende -->

 

Mehr als einen Bild-Slider einbinden

Wenn Sie mehr als einen Bilder-Slider auf einer Ihrer Seiten integrieren wollen, müssen Sie zusätzlichen jQuery-Code im Kopf der Seite einfügen:

Zusätzlicher JavaScript Quellcode für weiteren Bild-Slider

<script>
  jQuery( document ).ready(function( $ ) {

    //Scrolled by user interaction
    $("#weiterer-slider").carouFredSel({
      circular: true,
      infinite: true,
      scroll: {
        items: 1,
        duration: 2000,
        pauseOnHover: true
      },
      auto: true,
      prev: {
        button: "#weiterer-slider_prev",
        key: "left"
      },
      next: {
        button: "#weiterer-slider_next",
        key: "right"
      },
      pagination: "#weiterer-slider_pag"
    });

  });
</script>

Entsprechender Quelltext für Bild-Slider

<div class="list_carousel breite484">
    <ul id="weiterer-slider">

      <li>
        <img src="/kommunikation/internet/cd/images/Fotostrecke_Geniale_6.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Die Universität Bielefeld wurde 1969 mit explizitem Forschungsauftrag und hohem Anspruch an die Qualität einer forschungsorientierten Lehre gegründet.
        </div>
      </li>

      <li>
        <img src="/kommunikation/internet/cd/images/Fotostrecke_Geniale_12.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Heute umfasst sie 13 Fakultäten, die ein differenziertes Fächerspektrum in den Geistes-, Natur-, Sozial- und Technikwissenschaften abdecken.
        </div>
      </li>

      <li>
        <img src="/kommunikation/internet/cd/images/Fotostrecke_Geniale_1.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Mit rund 24.000 Studierenden in 115 Studienangeboten, ca. 2.750 Mitarbeiterinnen und Mitarbeitern, gehört sie zu den mittelgroßen Universitäten in Deutschland.
        </div>
      </li>

    </ul>

    <!-- Slider-Navigation -->
    <a class="prev" id="weiterer-slider_prev" href="#"><span>prev</span></a>
    <a class="next" id="weiterer-slider_next" href="#"><span>next</span></a>
    <div class="pagination" id="weiterer-slider_pag"></div>

    <div class="clear"></div>

</div> <!-- list_carousel Ende -->