Universität Bielefeld

© Universität Bielefeld

Einen News-Slider einbauen

News-Slider wie beispielsweise der Blickpunkt-Slider auf der Startseite der Universität Bielefeld sind ein guter Blickfang, um aktuelle Meldungen kurz an zu teasern und auf ausführlichere Berichtseiten weiter zu verlinken.

Diese News-Slider sind sowohl im normalen Inhaltsbereich als auch in den Startseitenboxen einsetzbar.


Gesamte Contentbreite

Code-Schnipsel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

<div class="content_full">

<div id="news" class="list_carousel newsslider">

  <ul id="bildslider">
    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=117949" alt="Schatzkarte Campus Uni Bielefeld" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> H1 Magazin </span></div>
      </div>
      <div class="fotocopyright footer"> Copyright: Universität Bielefeld </div>
      <div class="box_text">
        H1, das Magazin der Universität Bielefeld, gewährt Einblicke in unterschiedliche Bereiche der Universität und stellt Menschen vor, die hier studieren und arbeiten. <br>
        <a href="/kommunikation/medien-news/H1/" target="_blank" class="readmore">[Weiterlesen]</a>
      </div>
    </li>

    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=117708" alt="Citec: Frau und Roboter" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> CITEC </span></div>
      </div>
      <div class="fotocopyright footer"> Copyright: CITEC </div>
      <div class="box_text">
        Forschende am Exzellenzcluster CITEC arbeiten seit einem Jahrzehnt an besseren Brücken zwischen Mensch und Technik. <br>
        <a href="https://www.cit-ec.de/en" target="_blank" class="readmore">[zur Webseite]</a>
      </div>
    </li>

    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=117648" alt="Kinder in einem Hörsaal" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Kinder-Uni </span></div>
      </div>
      <div class="fotocopyright footer"> Copyright: Universität Bielefeld </div>
      <div class="box_text">
        Unter dem Motto: "Studieren wie die Großen" können Kinder der 3. und 4. Klasse Vorlesungen an der Universität Bielefeld besuchen, die von ProfessorInnen extra für die Kinder-Uni gestaltet werden.<br>
        <a href="/zll/abteilungen/junge_uni/kinderuni/index.html" target="_blank" class="readmore">[zur Webseite]</a>
      </div>
    </li>

    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=117489" alt="Computergrafik von zukünftigem Gebäude" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Gebäude Z </span></div>
      </div>
      <div class="fotocopyright footer"> Copyright: Kleusberg GmbH </div>
      <div class="box_text">
        Der Entwurf steht, die Verträge sind unterschrieben, das Gelände ist vorbereitet - heute (26.02.2018) beginnen die Bauarbeiten für das neue Bürogebäude...<br>
        <a href="https://ekvv.uni-bielefeld.de/blog/uniaktuell/entry/120_neue_b%C3%BCros_f%C3%BCr_uniplus" target="_blank" class="readmore">[Weiterlesen]</a>
      </div>
    </li>

    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=116866" alt="Globus vor Campushintergrund" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Projekt BRiDGE </span></div>
      </div>
      <div class="fotocopyright footer"> Photo: Universität Bielefeld </div>
      <div class="box_text">
        Sie fliehen aus Kriegs- und Krisengebieten, viele von ihnen nach Europa. Gemeint sind geflüchtete Wissenschaftlerinnen und Wissenschaftler...<br>
        <a href="https://ekvv.uni-bielefeld.de/blog/uniaktuell/entry/neue_initiative_als_chance_f%C3%BCr1" target="_blank" class="readmore">[Weiterlesen]</a>
      </div>
    </li>

    <li>
      <div class="box_bild">
        <img src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=115806" alt="Gebäudeausschnitt des Hauptgebäudes der Universität Bielefeld" height="135" />
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Web-Entwicklung </span></div>
      </div>
      <div class="fotocopyright footer">Copyright: Universität Bielefeld </div>
      <div class="box_text">
        Sie benötigen Hilfe bei der Erstellung oder Überarbeitung Ihrer Internetseiten? Wenden Sie sich gerne an die Web-Entwicklung.<br>
        <a href="/kommunikation/internet/index.html" target="_blank" class="readmore">[Services im Überblick]</a>
      </div>
    </li>
  </ul>

  <div class="clear"></div>
  <a class="prev" href="#" id="bildslider_prev"><span>prev</span></a>
  <a class="next" href="#" id="bildslider_next"><span>next</span></a>
  <div class="pagination" id="bildslider_pag"></div>
</div>

</div> <!-- content_full ende -->


Normale Contentbreite

Code-Schnipsel

Zur Darstellung des News-Sliders in der normalen Contentbreite nutzen Sie ebenfalls den obenstehenden Quellcode und lassen einfach das "content_full"-DIV-Element weg.

Mehrere News-Slider auf einer Seite

Möchten Sie auf einer Seite mehrere News-Slider anzeigen lassen, so müssen Sie zusätzlichen JavaScript-Code einfügen.
Siehe dazu: Bild-Slider (Abschnitt: Zusätzlicher JavaScript Quellcode)