bxslider在删除图像后留下空白幻灯片

问题描述：

如果点击导航中的链接，我想删除一些图像。所以我写了以下内容，但问题是图像被删除，但现在有两张空白的幻灯片放置在图像所在的位置。我怎样才能摆脱这些呢？我检查了其他相关的stackoverflow问题，但他们只提供我有的解决方案，但出于某种原因，它不能完全与我的实现一起工作。bxslider在删除图像后留下空白幻灯片

我没有包含所有的html，但是我在页面上包含了与bxslider相关的所有东西。

<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>

答

尝试，

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

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

这不是真正意义，因为cityskapes链接是在导航一个单独的按钮，为什么我会被移除它的父？ –

@TirthRami bxSlider每张幻灯片动态生成至少2个div，并将它们包裹在li上。 – zer00ne

bxslider在删除图像后留下空白幻灯片

相关推荐