jQuery | unterschiedliche Slider einer Seite ansprechen

[Grille]

Hallo Leute,

Ich möchte mir selbst einen Slider Bauen um 1. das Ganze besser zu verstehen und 2. das Ganze etwas schmaler zu halten (kleinere Dateien)

Dieses hier ist die HTML-Grundlage:

<div id="PicSlider-20" class="PicSlider slide">

<!-- Bilder -->
    <div class="item active">
        <img src="fileadmin/_processed_/csm_slyderTest_01_a478d8cd9d.png" width="1000" height="400" alt="">
        <div class="PicSlider-caption">
            <h4>H1 zum Bild 1</h4>
            <p>Text zum Bild 1</p>
        </div>
    </div>
    <div class="item ">
        <img src="fileadmin/_processed_/csm_slyderTest_02_108cbb031a.png" width="1000" height="400" alt="">
        <div class="PicSlider-caption">
            <h4>H1 zum Bild 2</h4>
            <p>Text zum Bild 2</p>
        </div>
    </div>
    <div class="item ">
        <img src="fileadmin/_processed_/csm_slyderTest_03_0740dd9342.png" width="1000" height="400" alt="">
    </div>
    <div class="item ">
        <img src="fileadmin/_processed_/csm_slyderTest_04_959e8a6ef8.png" width="1000" height="400" alt="">
    </div>

<!-- Menu-Punkte -->
    <div class="PicSlider-inner">
        <ol class="PicSlider-indicators">
            <li data-target="#PicSlider-20" data-slide-to="" class="active" ></li>
            <li data-target="#PicSlider-20" data-slide-to="1"></li>
            <li data-target="#PicSlider-20" data-slide-to="2"></li>
            <li data-target="#PicSlider-20" data-slide-to="3"></li>
        </ol>
    </div>
    
<!-- Vor- Zurück-Schaltflächen -->
    <a class="PicSlider-control left" href="#PicSlider-20" data-slide="pre"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="PicSlider-control right" href="#PicSlider-20" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Hier ist mein erstes Problem:

ich möchte vielleicht mehrere Slider auf eine Seite bringen. Jeder Slider hat eine ID (außerer DIV-Kontainer) die Nummer, im Beispiel eine 20, wird automatisch vergeben.

Wie kann ich jetzt jeden Slider für sich ansprechen?

so?

$(document).ready(function(){
    $("div[id='PicSlider-']").each(function(){
        
    });
});

Was mir sehr wichtig ist: die ganze Konstruktion soll die Webseite nicht wesendlich langsamer machen.

Vielen Dank für eure Hilfe ...
Grille.

 

[Sempervivum]

Hast Du überhaupt noch kein Javascript? Die einzelnen Slider kannst Du doch einfach über die ID des übergeordneten divs ansprechen bzw. $(this) bei deinem jQuery-Code. Eine Funktion schreiben, die den Slider aufbaut und dieser die ID als Parameter übergeben.

 

[Quaese]

Hi,

wenn du alle Slider ansprechen möchtest und alle mit PicSlider- beginnen, kannst du folgendes versuchen:

$(document).ready(function(){
    $("div[id^=PicSlider-]").each(function(){
        // ...
    });
});

Ciao
Quaese

 

[Grille]

Vielen Dank Quaese,

mein "alert('hello');" innerhalb Deiner Konstruktion wird endlich ausgeworfen.

Kurze Frage zu Deinem CODE

ist das: ("div[id^=PicSlider-]") eine reine Angabe mit regulären Ausdrücken, oder ist das eine JavaScript oder jQuery eingene Syntax? Wie muss man das lesen?

Gruß,
Grille.

 

[Parantatatam]

Du findest die Arten der Eigenschaftsselektoren hier bei jQuery.