0

I am trying to convert the following into a more elegant solution, a loop perhaps:

jQuery(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (swiper, index, className) {
        var index;
        var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
        if (index === 0) {
            return '<span class="' + className + '">' + (a[0]) + '</span>';
        }
        if (index === 1) {
            return '<span class="' + className + '">' + (a[1]) + '</span>';
        }
         if (index === 2) {
            return '<span class="' + className + '">' + (a[2]) + '</span>';
        }
         if (index === 3) {
            return '<span class="' + className + '">' + (a[3]) + '</span>';
        }
         if (index === 4) {
            return '<span class="' + className + '">' + (a[4]) + '</span>';
        }
         if (index === 5) {
            return '<span class="' + className + '">' + (a[5]) + '</span>';
        }
    }
});

});

I have tried various loop techniques such as the ones in this SO post, especially this one: 

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

Creating this as the loop:

jQuery(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationBulletRender: function (swiper, index, className) {
            var index;
            var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
            for (index = 0; index < a.length; ++index) {
                return '<span class="' + className + '">' + (a[index]) + '</span>';
            }
        }
    });

});

but this just displays the first item in the array for each bullet. I have created a JS Fiddle here.

This is only for a prototype so the Array will not change, please can someone help?

Thanks!

Community
  • 1
  • 1
user3327812
  • 37
  • 4

1 Answers1

0

Swiper itself is repeated for five times and you don't need for loop again to iterate check solution on >> https://jsfiddle.net/nv0mfy0z/1/

var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];

paginationBulletRender: function (swiper, index, className) {
       return '<span class="' + className + '">' + (a[index]) + '</span>';            
    }
dharmesh
  • 308
  • 1
  • 13