Sponsor-Board.de
Bootstrap Carousel hide controls

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: Bootstrap Carousel hide controls (/showthread.php?tid=39854)

Bootstrap Carousel hide controls - Aaron - 16.06.2013 23:46

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

RE: Bootstrap Carousel hide controls - Niklas - 17.06.2013 04:58

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

RE: Bootstrap Carousel hide controls - Aaron - 17.06.2013 07:26

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