时间戳

首页 > 解决方案 > 我在我的 asp.net 项目中使用 Slick Slider。一旦我通过“slickRemove”删除幻灯片，子滑块第一张幻灯片，内容变为空

jquery - 我在我的 asp.net 项目中使用 Slick Slider。一旦我通过“slickRemove”删除幻灯片，子滑块第一张幻灯片，内容变为空

问题描述

我正在研究 asp.net mvc 项目，其中包括 10 张幻灯片（主滑块）。在第 08 张幻灯片中包括另一个滑块（幻灯片内幻灯片 - 子滑块）。该子幻灯片是根据检索数据库中的记录数动态生成的。为此，我使用了Slick Slider插件。问题是我使用称为“slickRemove”的光滑滑块功能在主滑块中删除了一张幻灯片（第 7 张幻灯片 -> 第 06 个索引）

例如： $('#slick_MainSlider').slick('slickRemove', index);

一旦我删除它，索引就成功删除了。但是在第 08 张幻灯片中（在主滑块中），其中包含另一个滑块（“slick_SubSlider”）第一个索引内容未显示但第一张幻灯片存在（仅内容未显示在子 slickslider 的第一个索引中）

下面我提供了我尝试做的代码示例。（运行代码片段不起作用，请仅参考 HTML 和 JS 部分）

if($(".slide_LineChart").parent().parent().hasClass("slick-slide")) 
{
               
var index = $('.slide_LineChart').parent().parent().index()-1;
    console.log(index);
    $('#slick_MainSlider').slick('slickRemove', index);
                
}
<!-- Main Slick Slider -->
<div id="slick_MainSlider" class="slider">
  <div class="col-md-12" id="slide_1"><canvas id="line_barchart"></canvas></div>
  <div class="col-md-12" id="slide_2"><canvas id="line_barchart"></canvas></div>
  <div class="col-md-12" id="slide_3"><canvas id="line_barchart"></canvas></div>
  <div class="col-md-12" id="slide_4"><canvas id="line_barchart"></canvas></div>
  <div class="col-md-12" id="slide_5"><canvas id="line_barchart"></canvas></div>
  <div class="col-md-12" id="slide_6"><canvas id="line_barchart"></canvas></div>
 
  <!-- This is the slide i am removing --> 
  <div class="col-md-12 slide_LineChart" id="slide_7">
      <canvas id="line_Chart"></canvas>
  </div>
  
  <!-- Inside this slide, include sub slider --> 
    <div class="col-md-12" id="slide_8">
    <!-- Sub slider - start -->
    <div id="slick_SubSlider" style="">
      <div id="sub_slide1">Content</div>
      <div id="sub_slide2">Content</div>
      <div id="sub_slide3">Content</div>
      <div id="sub_slide4">Content</div>
    </div>
    <!-- Sub slider - end -->
  </div>
  
</div>

最后我想说主要问题是当我删除第 07 张幻灯片（在 Main Slick Slider 中）时，在 slick Sub Slider 中的第一张幻灯片（01 代码片段中给出的幻灯片）（子滑块包含在 Main Slick 滑块中的第 08 张幻灯片中），没有显示内容，但子幻灯片有空内容，

我正在为这个问题寻找一种解决方案。谢谢。

标签： jqueryslick.js

解决方案

推荐阅读