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
PHP
Script
Nun möchte ich ein zweiten Multi-Slider mit einer anderen Datenbank-Abfrage hinzufügen.
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?
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?
