Bind (Populate) Text from Json object to Swiper slider using jQuery AJAX

kavithav

SOLVED CLOSED ACTIVE ANSWERED
User: kavithav
Posted: on Dec 11, 2021 05:47 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4662

I am getting data in an array which I need to bind to the label below is my code. When the array is empty I need to bind no records found which are working but I need to bind the data in the array to the label. Suppose if I have 2 items in the array I need to bind two items i.e. slider 1 should have one item and again after sliding to the right I need to bind the second item.

If more than 1 item is there then the right slider should be enabled and if it has only 1 item right slider should be disabled if there are no items both the sliders should be disabled.

The issue is in my array if i am getting 2 items after the loop execution.

0: {Actid: 33463, Subject: 'ABC', Description: 'ABCD', Startdate: '0001-01-01T00:00:00', Enddate: '0001-01-01T00:00:00', …}
1: {Actid: 33466, Subject: 'DEF', Description: 'Test', Startdate: '0001-01-01T00:00:00', Enddate: '0001-01-01T00:00:00', …}

It should bind ABC for the first slider and since i have second record it should show div when i slide the right slider.

If i have only one instead of two it should show ABC with sliders disabled.

If there are 3 array items for the first it should show the first subject, when i silde right it should show second array value and again if i click right arrow it should show third array value.

Below is the code

success: function (data) {
    if (data.length == 0) {
        $('.swiper-wrapper').append('<div class="swiper-slide">No rocords found</div>');
    } else {
        if (data != null || data != 0 || data != "") {
            $('.swiper-wrapper').append('<div class="swiper-slide">Name : ' + data.Subject + '<br />Number: ' + data.Subject + '</div>');
        }
    }
    new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });
}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Dec 11, 2021 06:31 AM
Modified: on Dec 11, 2021 06:33 AM
Report

Hi kavithav,

Check the below example.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title>Swiper Slider</title>
    <style type="text/css">
        .swiper-container {
            width: 100%;
            height: 100px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            background-color: antiquewhite !important;
            text-align: center;
            font-size: 18px;
            background: #fff;
            height: 100px !important;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/css/swiper.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/js/swiper.jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var data = [
                { "Actid": 33463, "Subject": 'ASPSnippets', "Description": 'ABCD', "Startdate": '0001-01-01T00:00:00', "Enddate": '0001-01-01T00:00:00' },
                { "Actid": 33466, "Subject": 'ASPForums', "Description": 'Test', "Startdate": '0001-01-01T00:00:00', "Enddate": '0001-01-01T00:00:00' }
            ]

            if (data.length == 0) {
                $('.swiper-wrapper').append('<div class="swiper-slide">No rocords found</div>');
            } else {
                $.each(data, function (index, item) {
                    $('.swiper-wrapper').append('<div class="swiper-slide">Name : ' + item.Subject + '</div>');
                });
            }

            new Swiper('.swiper-container', {
                spaceBetween: 30,
                slidesPerView: 1,
                slidesPerColumn: 1,
                centeredSlides: true,
                autoplay: false,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev'
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Bind (Populate) Text from Json object to Swiper slider using jQuery AJAX

Company

Explore

Follow us

Contact Us