Zwei Multi-Slider auf einer Seite

CreativPur

CreativPur

Erfahrenes Mitglied
Hi,

ich möchte zwei Multi-Slider ( Bootstrap 5 ) untereinander auf eine Seite unterbringen.

für ein einzelnen Multi-Slider habe ich folgendes Script:

CSS

CSS: 
@media (max-width: 100%) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 100%) {
  
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
  
    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}

PHP

PHP: 
<?php
include("system/head.php");
include("system/nav.php");
include("inc/config.inc_datenbank.php");

$id = $_GET['id'];

$sql = "SELECT * FROM Filialen WHERE id = '$id'";
$filli = $pdo->query($sql)->fetch();
?>
  
  
<div class="container" style="margin-top:70px;margin-bottom:70px;">
    <h2>Filiale <?php echo $filli['fill_name'] ?></h2>
    <hr />
    <div class="row">
        <div class="col-12 col-xl-6">
            <img src="images/filialen/<?php echo $filli['img'] ?>" class="img-fluid" width="100%" alt="Möbel-Jaeger"/>
            <br /><br />
        </div>
        <div class="col-12 col-xl-6">
            <div class="row">
                <div class="col-12 col-xl-6">
                    <h5>xxxxxx</h5>
                    <br /> 
                    <?php echo $filli['Strasse'] ?>
                    <br /> 
                    <?php echo $filli['Ort'] ?>
                    <br />
                    <br />
                    Telefon: <?php echo $filli['Telefon'] ?>
                    <br />
                    Email: <?php echo $filli['hausleiter_email'] ?>
                    <br />
                    <br />
                    <br />
                    <b>Öffnungszeiten:</b>
                    <hr />
                    <?php echo $filli['off_mon'] ?>
                    <br/>
                    <div class="row">
                        <div class="col-4">
                            <?php echo $filli['off_tag'] ?>
                        </div>
                        <div class="col-8">
                            <?php echo $filli['off_zeit'] ?>
                        </div>
                        <div class="col-4">
                            <?php echo $filli['off_sa_tag'] ?>
                        </div>
                        <div class="col-8">
                            <?php echo $filli['off_sa_zeit'] ?>
                        </div>
                    </div>
                    <br /><br />
                </div>
                <div class="col-12 col-xl-6">
                    <div style="display: <?php echo (($filli['ladesaeule'] === NULL ) ? 'none' : 'block') ?>">
                        <img src="images/Ladesaeule_Goe.png" class="img-fluid" width="100%" alt="Möbel-Jaeger"/>
                        <br /><br />
                        <?php echo $filli['ladesaeule'] ?>
                    </div>
                </div>
                <div class="col-12 col-xl-12">
                    <br />
                    <br />
                    <?php echo $filli['google_map'] ?>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-12">
             <br />
             <br />
            <h3>Unsere Top-Verkäufer in <?php echo $filli['filiale'] ?></h3>
            <?php
                $FILLEI_Fil = $filli['filiale'];
                $sql = "SELECT * FROM users WHERE filliale = '$FILLEI_Fil' AND abteil = 'Hausleiter'";
                $FILLEI = $pdo->query($sql)->fetch();
            ?>
            <hr />
            <div class="row mx-auto my-auto justify-content-center">
                <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <div class="col-md-3" align="center">
                                <div class="card" style="border:solid 1px goldenrod; width: 96%">
                                    <div class="card-img">
                                        <img src="images/mitarbeiter/<?php echo $FILLEI['mitarbeiter_img'] ?>" width="100%" alt="Gül Jaeger">
                                    </div>
                                    <div style="font-size:12px; color:#fff; background-color: #000;padding:7px 0px 7px 0px;">
                                        <span style="color:goldenrod"><?php echo $FILLEI['Vorname'] ?> <?php echo $FILLEI['Nachname'] ?></span>
                                        <br />
                                        Filialleitung
                                        <br />
                                        Telefon: <?php echo $FILLEI['telefon'] ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                            $mit_fill = $filli['filiale'];
                            $HL_Nachname = $FILLEI['Nachname'];                   
                            $sql = "SELECT * FROM users WHERE filliale = '$mit_fill' AND status = '1' AND Nachname != '$HL_Nachname' AND mit_art IS NULL";
                            foreach ($pdo->query($sql) as $user1) {
                        ?>
                            <div class="carousel-item">
                                <div class="col-md-3" align="center">
                                    <div class="card" style="border:solid 1px goldenrod; width: 96%">
                                        <div class="card-img">
                                            <img src="images/mitarbeiter/<?php echo $user1['mitarbeiter_img'] ?>" width="100%" alt="<?php echo $user1['Vorname'] ?> <?php echo $user1['Nachname'] ?>">
                                        </div>
                                        <div style="font-size:12px; color:#fff; background-color: #000;padding:7px 0px 7px 0px;">
                                            <span style="color:goldenrod"><?php echo $user1['Vorname'] ?> <?php echo $user1['Nachname'] ?></span>
                                            <br />
                                            <?php echo $user1['abteilung'] ?>
                                            <br />
                                            Telefon: <?php echo $user1['telefon'] ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-12" style="display: <?php echo (($filli['filiale'] === 'Witzenhausen' ) ? 'block' : 'none') ?>">
            <br />
            <br />
            <br />
            <h3>Unsere Mitarbeiter in der Verwaltung</h3>
            <hr />
            ZWEITER SLIDER

        </div>
    </div>
</div>


Script

Javascript: 
<script>
let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    const minPerSlide = 4
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
          }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})
</script>


Nun möchte ich ein zweiten Multi-Slider mit einer anderen Datenbank-Abfrage hinzufügen.

PHP: 
 <?php
                            $mit_fill = $filli['filiale'];
                            $HL_Nachname = $FILLEI['Nachname'];                   
                            $sql = "SELECT * FROM users_VW WHERE filliale = '$mit_fill' AND status = '1' AND Nachname != '$HL_Nachname' AND mit_art IS NULL";
                            foreach ($pdo->query($sql) as $user1) {
                        ?>
                            <div class="carousel-item">
                                <div class="col-md-3" align="center">
                                    <div class="card" style="border:solid 1px goldenrod; width: 96%">
                                        <div class="card-img">
                                            <img src="images/mitarbeiter/<?php echo $user1['mitarbeiter_img'] ?>" width="100%" alt="<?php echo $user1['Vorname'] ?> <?php echo $user1['Nachname'] ?>">
                                        </div>
                                        <div style="font-size:12px; color:#fff; background-color: #000;padding:7px 0px 7px 0px;">
                                            <span style="color:goldenrod"><?php echo $user1['Vorname'] ?> <?php echo $user1['Nachname'] ?></span>
                                            <br />
                                            <?php echo $user1['abteilung'] ?>
                                            <br />
                                            Telefon: <?php echo $user1['telefon'] ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php } ?>

ich habe seit über eine Woche versucht, eine Lösung zu finden.
Aber leider werden auf dem zweiten Multi-Slider auch die Bilder des ersten Spider mit ausgegeben!

Ich habe für jeden Slider eine neue css und ein script angelegt und versucht diese anzupassen.
Leider ohne Erfolg

Weiß jemand, was ich genau anpassen muss, damit beide Slider unabhängig voneinander funktionieren?
 
Javascript: 
let items = document.querySelectorAll('.carousel .carousel-item')
Wenn ich das richtig sehe , du hast beide div's mit den gleichen Classes
 
Ist das dieser Slider, den Du verwendest?
Carousel
Ich würde erwarten, dass das CSS und JS in Bootstrap integriert ist. In so fern verstehe ich den Sinn des JS nicht, das Du gepostet hast. Oder ist das ein Auszug aus der Bootstrap-Datei?

Ich habe für jeden Slider eine neue css und ein script angelegt und versucht diese anzupassen.
Leider ohne Erfolg
Zum Vergrößern anklicken....
Das ist selten eine gute Idee. Wenn ein Slider intelligent implementiert ist, kann ein CSS und ein JS beliebig viele Slider verwalten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück