bxslider leave blank slide nach dem Entfernen des Bildes

Ich möchte einige Bilder entfernen, wenn ein Link in meinem Nav geklickt wird. Also schrieb ich Folgendes, aber das Problem ist, dass die Bilder entfernt werden, aber jetzt gibt es 2 leere Folien, wo die Bilder waren. Wie kann ich diese auch loswerden? Ich habe die anderen verwandten stackoverflow-Fragen überprüft, aber sie geben nur die Lösung an, die ich habe, aber aus irgendeinem Grund funktioniert sie nicht vollständig mit meiner Implementierung.bxslider leave blank slide nach dem Entfernen des Bildes

Ich habe nicht das ganze HTML eingeschlossen, aber ich habe alles miteinbezogen, was für den bxslider auf meiner Seite relevant war.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.bxslider').bxSlider({ 
 
    speed: 1000, 
 
    auto: true, 
 
    autoControls: false, 
 
    pager: false, 
 
    autoHover: true, 
 
    autoControlsCombine: true, 
 
    pause: 5000, 
 
    mode: 'fade' 
 
    }); 
 
}); 
 

 
function nocontext(e) { 
 
    var clickedTag = (e == null) ? event.srcElement.tagName : e.target.tagName; 
 
    if (clickedTag == "IMG") 
 
    return false; 
 
} 
 
document.oncontextmenu = nocontext; 
 

 
    $(document).ready(function(){ 
 
     $(".nav").localScroll({duration:300}); 
 

 
     $(".cityskapes-link").click(function(){ 
 
     $(".animals").remove(); 
 
     $(".bxslider").reloadSlider(); 
 
     }); 
 
    }); 
 

 
    </script> 
 
    <link href="css/jquery.bxslider.css" rel="stylesheet" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="css/photo.css"> 
 
    <title>Photography</title> 
 
</head> 
 

 
<body> 
 
    <!-- Nav --> 
 
    <div class="nav"> 
 
    <h1>TIRTH THE ARTIST PHOTOGRAPHY</h1> 
 
    <ul id="nav-link-container"> 
 
    <li><a class="cityskapes-link" id = "nav-link">Cityskapes</a></li> 
 
    <li><a class="animals-link" id = "nav-link">Animals</a></li> 
 
    <li><a class="people-link" id = "nav-link">People</a></li> 
 
    <li><a class="misc-link" id = "nav-link">Misc</a></li> 
 
</ul> 
 
    </div> 
 

 
    <!-- Picture Slideshow --> 
 
    <div id="slider"> 
 
    <ul class="bxslider"> 
 
     <li class="cityscapes"><img src="photos/NYC_Skyline_Revised.jpg"></li> 
 
     <li class="cityscapes"><img src="photos/MinionDrawing-1.jpg"></li> 
 
     <li class="animals"><img src="photos/NYC_Skyline_Daytime.jpg"></li> 
 
     <li class="animals"><img src="photos/HeavenlySunrise-2.jpg"></li> 
 
    </ul> 
 
    </div>

Quelle

2017-08-02 Tirth Rami

Versuchen,

var slider = $(".bx_slider").bxSlider({ 
    pager: false 
}); 

$('.cityskapes-link').click(function() { 
    $(this).parent().remove(); 
    slider.reloadSlider(); 
});

Quelle

2017-08-02 05:35:30 Hash

Dies würde nicht wirklich sinnvoll, da cityskapes-Link eine separate Taste auf der nav ist, warum sollte ich es Eltern werden zu entfernen? –

@TirthRami bxSlider generiert dynamisch mindestens 2 Divs pro Folie und umschließt die li. – zer00ne

bxslider leave blank slide nach dem Entfernen des Bildes

Antwort

Verwandte Themen