? Единственная причина , почему вы получаете все данные в ползунке, это потому, что нет условий. Если вы посмотрите на ползунки, у них есть родительский класс active, а в классе active - дочерний. Вы должны сопоставить его.
?? Прежде чем мы go к ползунку, первое, что вам нужно сделать, это изменить ваш meetings объект списка ,
Вы можете использовать этот код ниже ?, чтобы изменить структуру объекта списка 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, убедитесь, что используете эту функцию для изменения вашего meetings объекта списка . Например, вы можете посмотреть этот код ниже: ?
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>
Надеюсь, это поможет вам ?.