I have a bunch of div elements on my page, each with the col-sm-3 class from Bootstrap. Currently, I have 6 of these elements arranged in such a way that 4 are on one row and 2 are on the next row, taking up half of that row. Now, I want to display all these elements on a single row within a slider using JQuery, where a minimum of 5 elements will be visible at once, and users can navigate through them using left and right arrow buttons.
After some research, I came across an example called lightSlider in JQuery which seems to fit my requirements: . Specifically, I would like my implementation to resemble the second red example on their website.
However, when I attempted to use the lightSlider class on my elements as per the documentation, no changes were observed on the page.
Below is a snippet of my HTML:
<div class="row whiteBG" id="lightSlider">
@foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="@item.OutputImage" alt="@item.Image" />
<a href="@Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<div class="blend-box-top category-head" style="background: #0197BA url(@item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>@item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</div>
}
</div>
In addition to this, I included the following script just before the closing body tag:
<script type="text/javascript>
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
I am utilizing Visual Studio for development, and by default, JQuery is loaded at the bottom of the _Layout.cshtml file along with other necessary scripts for my project.