Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Kann ich das Carousel auch für andere Inhalte nutzen?
#1
Hallo Experten,

ich arbeite zur Zeit an einem Projekt, das der Planung einer Fahrzeugparade dienen soll.
Die Parade besteht aus mehreren Blöcken mit jeweils drei Spuren.

Als Übersicht der einzelnen Blöcke hatte ich mit vorgestellt, die einzelnen Fahrzeuge als <button> darzustellen, und sie dann entsprechend innehalb eines containers anzuordnen.
Diese Container sollen dann die einzelnen Carousel-Items und über die Scroll-Pfeile zum "Durchblättern" sein.

Geht das überhaupt?
... und wenn ja, wie?

Meine Versuche sehen da eher kläglich aus.

Mag da vielleicht mal einer drüber schauen?

Mein Projekt

Liebe Grüße,
Berndi
Zitieren
#2
Da sollte schon gehen. Wenn ich das richtig verstanden habe soll für jeden Block ein Karussell erstellt werden, welches dann über den entsprechenden Button aufgerufen wird. Das sollte sich mit JavaScript umsetzen lassen.
Zitieren
#3
Danke für die Antwort.

Kannst du das näher erläutern?
Bootstrap liefert doch bereits eine Carousel-Funktion.
Was muss ich denn, außer dem, was ich bereits getan habe, noch tun?

Gruß,
Berndi
Zitieren
#4
Ich denke so hast du das gemeint?

HTML5
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.  
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
  8.     <title>Bootstrap-Basis-Vorlage</title>
  9.  
  10.     <!-- Bootstrap CSS -->
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  12.  
  13.     <style>
  14.         #Block-1 {
  15.             display: block;
  16.         }
  17.         #Block-2 {
  18.             display: none;
  19.         }
  20.     </style>
  21.  
  22. </head>
  23.  
  24.     <div class="container">
  25.         <div id="Block-1" class="carousel slide" data-ride="carousel1">
  26.             <!-- Indicators -->
  27.             <ol class="carousel-indicators">
  28.                 <li data-target="Block-1" data-slide-to="0" class="active"></li>
  29.                 <li data-target="Block-1" data-slide-to="1"></li>
  30.                 <li data-target="Block-1" data-slide-to="2"></li>
  31.             </ol>
  32.  
  33.             <!-- Wrapper for slides -->
  34.             <div class="carousel-inner">
  35.                 <div class="item active">
  36.                     <img src="images/bild1-1.jpg" alt="Block1 Bild1">
  37.                 </div>
  38.  
  39.                 <div class="item">
  40.                     <img src="images/bild1-2.jpg" alt="Block1 Bild2">
  41.                 </div>
  42.  
  43.                 <div class="item">
  44.                     <img src="images/bild1-3.jpg" alt="Block1 Bild3">
  45.                 </div>
  46.             </div>
  47.  
  48.             <!-- Left and right controls -->
  49.             <a class="left carousel-control" href="#Block-1" data-slide="prev">
  50.                 <span class="glyphicon glyphicon-chevron-left"></span>
  51.                 <span class="sr-only">Previous</span>
  52.             </a>
  53.             <a class="right carousel-control" href="#Block-1" data-slide="next">
  54.                 <span class="glyphicon glyphicon-chevron-right"></span>
  55.                 <span class="sr-only">Next</span>
  56.             </a>
  57.         </div>
  58.  
  59.         <div id="Block-2" class="carousel slide" data-ride="carousel1">
  60.             <!-- Indicators -->
  61.             <ol class="carousel-indicators">
  62.                 <li data-target="Block-2" data-slide-to="0" class="active"></li>
  63.                 <li data-target="Block-2" data-slide-to="1"></li>
  64.                 <li data-target="Block-2" data-slide-to="2"></li>
  65.             </ol>
  66.  
  67.             <!-- Wrapper for slides -->
  68.             <div class="carousel-inner">
  69.                 <div class="item active">
  70.                     <img src="images/bild2-1.jpg" alt="Block2 Bild1">
  71.                 </div>
  72.  
  73.                 <div class="item">
  74.                     <img src="images/bild2-2.jpg" alt="Block2 Bild2">
  75.                 </div>
  76.  
  77.                 <div class="item">
  78.                     <img src="images/bild2-3.jpg" alt="Block2 Bild3">
  79.                 </div>
  80.             </div>
  81.  
  82.             <!-- Left and right controls -->
  83.             <a class="left carousel-control" href="#Block-2" data-slide="prev">
  84.                 <span class="glyphicon glyphicon-chevron-left"></span>
  85.                 <span class="sr-only">Previous</span>
  86.             </a>
  87.             <a class="right carousel-control" href="#Block-2" data-slide="next">
  88.                 <span class="glyphicon glyphicon-chevron-right"></span>
  89.                 <span class="sr-only">Next</span>
  90.             </a>
  91.         </div>
  92.         <div class="row">
  93.  
  94.         <div class="row">
  95.             <div class="col-md-4">
  96.                <h2 class="text-center">Block 1</h2>
  97.                 <button id="ButtonBlock-1"><img src="images/bild1-1.jpg" class="thumbnail img-responsive"></button>
  98.             </div>
  99.             <div class="col-md-4">
  100.                <h2 class="text-center">Block 2</h2>
  101.                 <button id="ButtonBlock-2"><img src="images/bild2-1.jpg" class="thumbnail img-responsive"></button>
  102.             </div>
  103.         </div>
  104.  
  105.         </div>
  106.     </div>
  107.  
  108.  
  109.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  110.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  111.     <script src="js/bootstrap.min.js"></script>
  112.  
  113.     <script>
  114.         $(document).ready(function() {
  115.             $("#ButtonBlock-1").click(function() {
  116.                 $("#Block-2").hide();
  117.                 $("#Block-1").show();
  118.             });
  119.             $("#ButtonBlock-2").click(function() {
  120.                 $("#Block-1").hide();
  121.                 $("#Block-2").show();
  122.             });
  123.         });
  124.  
  125.     </script>
  126. </body>
  127.  
  128. </html>


Zitieren
#5
Nein.
Eher so, wie es der obige Link zeigt.

(Bitte mal den Seitenquelltext anschauen.) ;-)

Gruß,
Berndi

PS: Ich kann keinen Code posten, bekomme die Meldung ich sei nicht berechtigt. :-(
Zitieren
#6
Leider versteh ich das Problem nicht ganz!
Zitieren
#7
Egal, mit Bootstrap4 kann man es machen.
Habe jetzt auf Bootstrap4 umgestellt.
Trotzdem danke.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 69
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>