Bootstrap Carousel hide controls

Verfasser Nachricht

Aaron

Beiträge: 3.413
Bewertung: 33
Registriert seit: Oct 2010
Status: offline

Beitrag: #1

Bootstrap Carousel hide controls

Abend zsm,
folgende Situation :

Ich hab das Carousel von dem Twitter Bootstrap eingebunden und möchte nun, dass wenn der erste Slide angezeigt wird, der "zurück"-Button nicht mehr sichtbar ist, wenn der letzte Slide angezeigt wird, soll logischer Weise der "weiter"-Button ausgeblendet werden ...

Ich habe es bereits hiermit probiert :

Code:

$(document).ready(function () {

            $('.carousel')

                .carousel({ interval: false })

                .on('slid', function (event)

                {

                    var aktuell = $('.active', $(event.target));

                    if (aktuell.data('location') == 'first')

                    {

                        $('a.carousel-control.left').hide();

                        $('a.carousel-control.right').show();

                    }

                    else if (aktuell.data('location') == 'last')

                    {

                        $('a.carousel-control.left').show();

                        $('a.carousel-control.right').hide();

                    }

                    else

                    {

                        $('a.carousel-control.left').show();

                        $('a.carousel-control.right').show();

                    }

                });

        });

die HTML Struktur :

Code:

<div id="carousel" class="carousel slide">

                <div class="carousel-inner">

                    <div class="active item">

                        <div>

                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

                        </div>

                    </div>

                    <div class="item">

                        <div>

                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

                        </div>

                    </div>

                    <div class="item">

                        <div>

                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

                        </div>

                    </div>

                </div>

                <a class="carousel-control left" href="#carousel" data-slide="prev">zurück</a>

                <a class="carousel-control right" href="#carousel" data-slide="next">weiter</a>

            </div><!--end #carousel-->

Jemand vllt ne Idee ?
Bin für jede Hilfe dankbar Wink

mfg Aaron

Portfolio: [Link: Registrierung erforderlich]

Projekte
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]

16.06.2013 23:46

Niklas

Beiträge: 624
Bewertung: 32
Registriert seit: Jul 2012
Status: offline

Beitrag: #2

RE: Bootstrap Carousel hide controls

Hi,
versuche es doch mal mit document.getElementById und ändere so den style auf hidden

Mit freundlichen Grüßen,
Niklas

17.06.2013 04:58

Aaron

Beiträge: 3.413
Bewertung: 33
Registriert seit: Oct 2010
Status: offline

Beitrag: #3

RE: Bootstrap Carousel hide controls

habs gelöst, ich Pfeife hab vergessen beim letzten Element das data Attribut "last" und beim ersten dementsprechend "first" hinzuzufügen ...

aber danke trotzdem Niklas

Portfolio: [Link: Registrierung erforderlich]

Projekte
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]

17.06.2013 07:26

Baumstrukturmodus | Brettstrukturmodus

« Ein Thema zurück | Ein Thema vor »

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	Hilfe bei PHP Kontaktformular / Bootstrap	zuparken	1	3.946	12.04.2016 14:27 Letzter Beitrag: kRONOS

Druckversion anzeigen
Thema einem Freund senden
Thema abonnieren
Thema zu den Favoriten hinzufügen