How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?

Question

I have div elements on a page with col-sm-3 classes. So far, I have 6 of these elements and so, 4 elements are on 1 row and 2 are on the next row which fill half this row. I am using Bootstrap.

I want to make all these elements be contained on 1 row in a slider using JQuery with a minimum of 5 elements showing and be able to click on left-right arrow buttons to view all elements.

I found this example JQuery called lightSlider: http://sachinchoolur.github.io/lightslider/ There are 2 examples on this website and I would like to make mine similar to the second red example.

I have tried to use the lightSlider class on my elements, but no change is seen.

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

I have a row which added multiple amounts of col-sm-3 div elements.

I also placed this below my HTML before the ending body tag:

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
</script>

I am using Visual Studio and JQuery is loaded in by default at the bottom of the _Layout.cshtml file:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

It was the first time using JQuery for me and the problem was that I was including all the classes in my HTML that I saw in the Chrome Developer Tool HTML for the second example slider here: http://sachinchoolur.github.io/lightslider/index.html This was not necessary and caused errors since I was only meant to use 1 class which then automatically added new classes to my HTML.

Firstly, I used the lightslider.js, lightslider.css and controls.png files into my project available here: https://github.com/sachinchoolur/lightslider/tree/master/src

I then placed the folling script into my HTML page before the ending body tag:

    $(document).ready(function () {
        window.prettyPrint && prettyPrint()

        $('#content-slider').lightSlider({
            keyPress: false,
            item: 5,
            loop: true,
            onSliderLoad: function () {
                $('#content-slider').removeClass('cS-hidden');
            }
        });

    });
</script>

This is available on the GitHub repository link above - I changed it a bit to make the item attribute display 5 elements initally.

It is crucial that you place this script after the script that calls the JQuery. It took me a day to find out this was the problem.

In lightslider.css you need to change the filePath to include the image used for the left-right arrows correctly. the class is .lSAction > a. I just placed mine in the Images folder and this is the attribute that I changed: background-image: url('Images/controls.png');

This is my HTML:

What you need to know is that I only include 1 class in my HTML list: ul<id="content-slider"> which will add the other necessary lightSlider to create the second example slider displayed here: http://sachinchoolur.github.io/lightslider/index.html

<div class="row whiteBG">

        <ul id="content-slider" >

            @foreach (var item in Model)
            {
                <li class="col-sm-4 align-centre">
                    <a href="@Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">

                        <img src="@item.OutputImage" alt="@item.Image" />

                        <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>
                </li>
            }

        </ul>

    </div>

I hope this can help someone else going through a similar problem. :)

Answer 2

<div class="col-sm-2 align-centre">

Change your class from 3 > 2 so that 5 will fit.