I want to replace the numbers in the HTML menu li link class"scrollTo" (created by JavaScript) to individual text rather than the 01, 02, 03, 04 numbers
function createSliderPagination(container){
var wrapper = $('<ol class="slot-navigation"></ol>');
container.children('.slot-slider').find('li').each(function(index){
var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText = (index+1 < 10) ? '0' + (index+1): index+1;
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}
Html code created is this that the JavaScript is creating
<ol class="slot-navigation">
<li><a href="#0" class="scrollTo">01</a></li>
<li class="selected"><a href="#0" class="scrollTo">02</a></li>
<li><a href="#0" class="scrollTo">03</a></li>
<li><a href="#0" class="scrollTo">04</a></li>
<li><a href="#0" class="scrollTo">05</a></li>
</ol>
You can add an array which contains the texts you want to use instead of the numbers , as an example :
function createSliderPagination(container){
const links = ['first title','second title','third title','fourth title','fifth title'] // An array that contain the texts you want to use
var wrapper = $('<ol class="slot-navigation"></ol>');
container.children('.slot-slider').find('li').each(function(index){
var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText = links[index]
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}
You could use a switch statement to evaluate index :
function createSliderPagination(container) {
var wrapper = $('<ol class="slot-navigation"></ol>');
container.children('.slot-slider').find('li').each(function(index) {
var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText;
switch(index) {
case 0:
dotText = "Home";
break;
case 1 :
dotText = "Our services";
break;
case 2 :
dotText = "Third item";
break;
case 3 :
dotText = "Fourth item";
break;
default :
dotText = "Default";
break;
}
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}