Mehrere Slider gleichzeitig

Tim_phi · 2 Oktober 2015

Hallo zusammen,

ich bin gerade dabei eine Seite zu erstellen, auf der auf der einen Seite Text und auf der anderen Seite Slider untereinander mit verschiedenen Bildern dargestellt werden sollen. Da ich von JS keine Ahnung habe, hab ich mehrere Slider ausprobiert und den Rhinoslider gefunden und benutzt, da er für meine Ansprüche am einfachsten zu verändern ist. Das Problem dabei ist, dass ich 3 Slider untereinander haben möchte, da jeder zu einem anderem (Bild)Thema ist. Ich hab schon ein paar Möglichkeiten, die ich gelesen hab ausprobiert, aber bin nie zu einem Ergebnis gekommen.
Hier dazu mein HTML Code mit einem Slider, der andere, wie gesagt, funktioniert nicht:

Hier einmal der HTML head Teil..

Code:

<head>
 
        <link rel="stylesheet" href="../layout/Layout.css" media="screen">
        <meta name="viewport">
        <link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
        <script type="text/javascript" src="js/mousewheel.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').rhinoslider({
                    effect: 'fade',
                    showTime: 5000,
                    autoPlay: true,
                    showBullets: 'never'
                });
            });
        </script>
    </head>

und hier den Slider, wobei der 2te ab "Doesn't work" nicht funktioniert..

Code:

                     <h2> Biotop </h2>
                     <div>
                       <ul id="slider">
                       <?php
                       $ordner = "Biotop"; //Ordnername
                       $allebilder = scandir($ordner);
                         foreach ($allebilder as $bild)
                         {
                           $bildinfo = pathinfo($ordner."/".$bild);
                           if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db")
                           {
                             ?>
                             <li>
                               <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?> " width = "250px"> 
                             </li>
                             <?php
                           };
                          };
                         ?>
                       </ul>
                     </div>   
                   <!--Doesn`t work!-->
                     <h2> Feldrevier </h2>
                     <div>
                       <ul id="slider">
                       <?php
                       $ordner = "Feldrevier"; //Ordnername
                       $allebilder = scandir($ordner);
                         foreach ($allebilder as $bild)
                         {
                           $bildinfo = pathinfo($ordner."/".$bild);
                           if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db")
                           {
                             ?>
                             <li>
                               <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?> " width = "250px"> 
                             </li>
                             <?php
                           };
                          };
                         ?>
                       </ul>
                     </div>   

         </table> 
       </div>

Hat jemand eine Idee wie das Problem zu lösen ist?

Vielen Dank schonmal!

Tronjer · 2 Oktober 2015

ID doppelt vergeben.

Tim_phi · 2 Oktober 2015

Das ist mir bewusst. Nur weiß ich nicht wie ich aus dem einen Script sogesehen 2 mache, damit ich unterschiedliche IDs vergeben kann!

LG

scbawik · 2 Oktober 2015

Tim_phi schrieb:
Das ist mir bewusst. Nur weiß ich nicht wie ich aus dem einen Script sogesehen 2 mache, damit ich unterschiedliche IDs vergeben kann!

LG

Wenn der Slider gut programmiert ist, einfach statt der ID eine Klasse verwenden:

Code:

$('.slider').rhinoslider(…)

Tim_phi · 2 Oktober 2015

Ist er anscheinend nicht, wenn du es so meinst wie ich es gerade umgesetzt habe:

Code:

<script type="text/javascript">
            $(document).ready(function() {
                $('.slider').rhinoslider({
                    effect: 'fade',
                    showTime: 5000,
                    autoPlay: true,
                    showBullets: 'never'
                });
            });
        </script>

Code:

<ul class="slider">
....
</ul>

Jetzt sind zwar beide Slider (in riesigen Abständen?!) untereinander und durchlaufen auch schön die Bilder, aber es gibt nur ein mal den Previous/Next Button Kilometer weiter unten auf der Seite...

Sempervivum · 2 Oktober 2015

Ich habe es mal ausprobiert und bei mir funktioniert es mit zwei Slidern einwandfrei. Sie sind auch direkt untereinander und haben jeweils eigene Controls. Allerdings musste ich auch das CSS anpassen, weil dort ebenfalls IDs angegeben waren.

Tim_phi · 6 Oktober 2015

Daran lags. Danke euch!

Mehrere Slider gleichzeitig

Tim_phi

Neues Mitglied

Tronjer

Senior HTML'ler

Tim_phi

Neues Mitglied

scbawik

Senior HTML'ler

Tim_phi

Neues Mitglied

Sempervivum

Guest

Tim_phi

Neues Mitglied

Neueste Beiträge