文章/答案/技术大牛

发布

社区首页 >问答首页 >在后端数据引导中，滑块数据不能很好地工作。

问在后端数据引导中，滑块数据不能很好地工作。
EN

Stack Overflow用户

提问于 2020-02-02 10:02:07

回答 2查看 146关注 0票数 0

Hello显示从后端到滑块的数据，但是它没有很好的响应，最初是这样的

向左滑行，但现在是这样

所有的数据都是同时显示出来的。我想在下一张幻灯片上显示其他数据，我正在使用这个滑块

https://codepen.io/kravisingh/pen/pLGzgo

代码：

  <div class="carousel-item active">
       <% meetings.forEach(function(meeting){ %>
            <div class="col-xs-3 col-sm-3 col-md-3">
                 <div class="col-md-2 col-xs-12 upcoming-btn">
                      <span href="" class="btn btn-success btn-lg dashboard-icon" style="width: 200px; height: 150px;">
                          <p style="padding-top: 15px; font-size: 25px;
                                                        font-weight: bold;"><%= meeting.subject %></p>
                          <p style="font-size: 25px; font-weight: bold;"><%= convertDate(meeting.date) %></p>
                          <p style="font-size: 25px; font-weight: bold;">Upcoming</p>
                        </span>
                     </div> 
                   </div> 
                 <% }) %>   
               </div>

完整滑块代码：

.col-md-3 {
  display: inline-block;
  margin-left: -4px;
}

.col-md-3 img {
  width: 100%;
  height: auto;
}

body .carousel-indicators li {
  background-color: red;
}

body .carousel-control-prev-icon,
body .carousel-control-next-icon {
  background-color: red;
}

body .no-padding {
  padding-left: 0;
  padding-right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="container carousel-inner no-padding">
    <div class="carousel-item active">
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg">
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

html

bootstrap-4

ejs

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-03 13:26:48

是获得滑块中所有数据的唯一原因，这是因为没有条件。如果您查看滑块，有一个父类作为active类，而在active类中，有一个子类。你得绘制地图。

在我们进入滑块之前，首先要做的是更改您的列表对象。

您可以使用下面的代码更改您的meetings列表对象结构，这样您的meetings列表将有一个父和子：

function setMeetingSliders(meetings) {
  let i = 0;
  const meetingsTemp = [];

  let itemPerSlider = 4;

  meetings.forEach((meeting, index) => {
    if(index%itemPerSlider === 0) {
      meetingsTemp[i] = [];
      meetingsTemp[i].push(meeting);
      i++;
    } else {
      meetingsTemp[i-1].push(meeting);
    }
  });

  return meetingsTemp;
};

meetings Now，在呈现meetings列表之前，确保使用此函数更改 list对象。例如，您可以查看下面的代码：

app.get('/yourmeetings', (req, res) => {
  let meetings = GetMeetingFromDatabase();

  // change your meetings list obect
  meetings = setMeetingSliders(meetings);

  res.render('meetings', { meetings });

});

更改meetings列表对象后，现在可以使用下面的滑块使滑块工作。

<div id="demo" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="container carousel-inner no-padding">
    <!-- mapping your meetings parent -->
    <% meetings.forEach(function(meeting,index){ %>
    <div class="carousel-item <%= index === 0 ? 'active' : '' %>">
      <!-- mapping your meetings child -->
      <% meeting.forEach(function(m){ %>
      <div class="col-xs-3 col-sm-3 col-md-3">
        <div class="col-md-2 col-xs-12 upcoming-btn">
          <span href="" class="btn btn-success btn-lg dashboard-icon" style="width: 200px; height: 150px;">
            <p style="padding-top: 15px; font-size: 25px; font-weight: bold;"><%= m.subject %></p>
            <p style="font-size: 25px; font-weight: bold;"><%= convertDate(m.date) %></p>
            <p style="font-size: 25px; font-weight: bold;">Upcoming</p>
          </span>
        </div> 
      </div>    
      <% }) %>   
    </div>
  <% }) %>   
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

我希望它能帮到你。

票数 0

Stack Overflow用户

发布于 2020-02-02 11:47:06

将s放置在页面末尾附近，就在结束标记之前，以启用它们，然后使用以下内容：

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="container carousel-inner no-padding">
        <div class="carousel-item active">
           <div class="row">
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
               </div>
           </div>
        </div>
        <div class="carousel-item">
           <div class="row">
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" class="img-fluid">
               </div>
               <div class="col-xs-3 col-sm-3 col-md-3">
                   <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" class="img-fluid">
               </div>
           </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg"  class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60025003

复制

相似问题

问在后端数据引导中，滑块数据不能很好地工作。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在后端数据引导中，滑块数据不能很好地工作。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在后端数据引导中，滑块数据不能很好地工作。
EN