I have to create a website only using html, js and boostrap but I have too many carousels in the website so I tried to create them dynamically onload using the code below. The below given is the girls_ethnic data.In the same way I have boys_shirts,boys_pants,boys_dungrees data.The carousels are displayed but there is some problem with the previous and next buttons.As appendCarouselElements function is invoked 4 times, there should be 4 previous and next buttons but there are only 2 previous and next buttons. One pair of them does not even work . When I click on the pair of the buttons that work, all the carousels are sliding to next item(which should not happen).PLease help me.
var girls_ethnic=[
{
name:"pinky frock",
img_name:"ethnic1",
price:"419",
original_price:"599",
discount:"30% OFF"
},
{
name:"blue frock",
img_name:"ethnic2",
price:"599",
original_price:"",
discount:""
},
{
name:"cutie pink frock",
img_name:"ethnic3",
price:"1609",
original_price:"2299",
discount:"30% OFF"
},
{
name:"rainbow frock",
img_name:"ethnic4",
price:"419",
original_price:"599",
discount:"30% OFF"
},
{
name:"white and black bow frock",
img_name:"ethnic5",
price:"499",
original_price:"599",
discount:"20% OFF"
},
{
name:"butterfly frock",
img_name:"ethnic6",
price:"799",
original_price:"",
discount:""
},
{
name:"red and bow elegant frock",
img_name:"ethnic7",
price:"849",
original_price:"",
discount:""
},
{
name:"rose frock",
img_name:"ethnic8",
price:"419",
original_price:"599",
discount:"30% OFF"
},
{
name:"shinny red frock",
img_name:"ethnic9",
price:"799",
original_price:"",
discount:""
},
{
name:"black frock",
img_name:"ethnic10",
price:"700",
original_price:"",
discount:""
}
]
function fillData(){
appendCarouselElements(girls_ethnic,"girls_ethnic");
appendCarouselElements(boys_dungrees,"boys_dungrees");
appendCarouselElements(boys_shirts,"boys_shirts");
appendCarouselElements(boys_pants,"boys_pants");
}
function appendCarouselElements(dress_array,category){
var k=0;
var category_id="#"+category;
if(k==0){
var $carousel_basic=$('<div id='+category+' class="carousel slide" data-ride="carousel" interval="false">'+
'<div class="carousel-inner">'+
'</div>'+
'<a class="carousel-control-prev" href='+category_id+' role="button" data-slide="prev">'+
'<span class="carousel-control-prev-icon" aria-hidden="true"></span>'+
'<span class="sr-only">Previous</span>'+
'</a>'+
'<a class="carousel-control-next" href='+category_id+' role="button" data-slide="next">'+
'<span class="carousel-control-next-icon" aria-hidden="true"></span>'+
'<span class="sr-only">Next</span>'+
'</a>'+
'</div>');
$('#carousels').append($carousel_basic);
}
for(var slides=0;slides<2;slides++){
if(slides==0){
$(".carousel-inner").append('<div class="carousel-item active"><table></table></div>');
}
else{
$(".carousel-inner").append("<div class='carousel-item '><table></table></div>");
}
var main=document.getElementsByTagName("table")[slides];
var row= main.insertRow(-1);
for(var i=k+1;i<=k+5;i++){
console.log(dress_array);
var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
var item=row.insertCell(-1);
item.innerHTML='<img class="dress-image" src='+x+' alt="First slide">'+'<div class="info"><p class="text-center text-capitalize font-weight-bold name">'+
dress_array[i-1].name+'</p>'+
'<p class="price">Rs '+dress_array[i-1].price +'<span class="float-right font-weight-bold discount">'+dress_array[i-1].discount+'</span></p></div>'
}
k=(slides+1)*5;
}
}
function appendCarouselElements(dress_array,category,title){
var k=0;
var category_id="#"+category;
if(k==0){
var carousel_basic=
`<h3>${title}</h3>
<div id=${category} class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" id="${category}_carousel_inner">
</div>
<a class="carousel-control-prev" href=${category_id} role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href=${category_id} role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>`
$('#carousels').append(carousel_basic);
}
for(var slides=0;slides<max_slides;slides++){
if(slides==0){
$("#"+category+"_carousel_inner").append(`<div class="carousel-item active" id="${category}_carousel_item_${slides}"></div>`);
}
else{
$("#"+category+"_carousel_inner").append(`<div class="carousel-item" id="${category}_carousel_item_${slides}"></div>`);
}
var slide_id=category+"_carousel_item_"+slides;
$("#"+slide_id).append(`<div class="row" id="${category}_row_${slides}"></div>`);
for(var i=k+1;i<=k+max_items;i++){
var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
var rows=category+"_row_"+slides;
$("#"+rows).append(`
<div class="col item">
<div class="dress-image">
<img src="${x}" alt="First slide">
</div>
<div class="info">
<p class="text-center text-capitalize font-weight-bold name">${dress_array[i-1].name}</p>
<div class="row">
<div class="col">
<span class="price">Rs ${dress_array[i-1].price}</span>
${(max_items===6 && dress_array[i-1].original_price) ? '<span class="original_price">' + dress_array[i-1].original_price + '</span>' : ''}
</div>
<div class="col">
${(dress_array[i-1].discount) ? '<span class="discount">' + dress_array[i-1].discount + '</span>' : ''}
</div>
</div>
</div>
</div>`)
}
k=((slides+1)*(max_items));
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.