[英]Dynamically adding bootstrap carousels using jquery and javascript
我必須只使用 html、js 和 boostrap 創建一個網站,但是我在網站上有太多的輪播,所以我嘗試使用下面的代碼在加載時動態創建它們。 下面給出的是girls_ethnic 數據。同樣的,我有boys_shirts,boys_pants,boys_dungrees 數據。輪播顯示了,但是上一個和下一個按鈕有問題。由於appendCarouselElements 函數被調用4 次,所以應該有4 個previous和下一個按鈕,但只有 2 個上一個和下一個按鈕。 其中一對甚至不起作用。 當我點擊一對有效的按鈕時,所有的輪播都滑動到下一個項目(這不應該發生)。請幫助我。
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));
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.