bootstrap轮播图简单使用

bootstrap官网链接

小demo效果如下（忽略样式）：

将每页的数据动态渲染上去，每页几条数据自己定义

1.定义数据结构如下：

   let bestGoodsList = [
            { name: "美国商标" },
            { name: "英国商标" },
            { name: "澳大利亚商标" },
            { name: "日本商标" },
            { name: "新加坡商标" },
            { name: "加拿大商标" },
            { name: "韩国商标" },
            { name: "中国香港商标" },
            { name: "中国澳门商标" },
        ];

2.处理数据

           let arr = [];
            for (let i = 0; i < bestGoodsList.length; i++) {
                let idx = Math.floor(i / 4);    //每页四条数据，每页几条数据除几即可
                if (!arr[idx]) {
                    arr[idx] = []
                }
                arr[idx].push(bestGoodsList[i])

            }
            console.log(arr)

3.将处理后的数据循环遍历渲染到页面

			var str = "";
            for (let i = 0; i < arr.length; i++) {
                console.log(arr[i])
                var innerStr = "";
                for (var j = 0; j < arr[i].length; j++) {
                    // console.log(arr[i][j].name)
                    innerStr += `<li>${arr[i][j].name}</li>`
                }
                if (i == 0) {
                    str += `
                            <div class="item active">
                                <ul class="best-goods">
                                    ${innerStr}
                                  </ul> 
                            </div>
                            `
                } else {
                    str += `
                            <div class="item">
                                <ul class="best-goods">
                                    ${innerStr}
                                  </ul> 
                            </div>
                            `
                }
            }
            $('.carousel-inner').html(str)

html结构如下图：

补充：

1.取消自动轮播；

方法一：

方法二：

$('#carousel-example-generic').carousel({
                pause: true,
                interval: false
   });

若方法一无效，则使用方法二；

2.给动态生成的元素添加点击事件需使用事件委派，普通事件点击不会触发；

语法如下：
$('父元素').on('click','子元素'，function(){ })

 $('#carousel-example-generic').on('click', '点击的子元素', function () {
        console.log(1)
  })