使用 jQuery 动态地将幻灯片添加到 Bootstrap 3 轮播 [英] Add slides to Bootstrap 3 carousel dynamically using jQuery

查看：20
本文介绍了使用 jQuery 动态地将幻灯片添加到 Bootstrap 3 轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 jQuery 将幻灯片添加到 Bootstrap carousel，但它在浏览器中没有充当滑块.相反，它在列表视图中显示图像.

<头><link href="Assets/css/bootstrap.css" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"><script src="Assets/js/bootstrap.min.js"></script><title></title><脚本>加载=函数(){for(var m=3;m>=0;m--){var path="file_uploads/"+m+".jpg";$(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to="""+m+""></li>");$(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");}$(".carousel-indicators li:first").addClass("active");$(".carousel-inner .item:first").addClass("active");$('.carousel').carousel();}<身体><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"></ol><!-- 幻灯片包装器--><div class="carousel-inner">

<!-- 控件--><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

解决方案

首先，我将依赖这样一个事实，即 m 是一个数组，其中包含正确的图像 url.

HTML 应该是这样的:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指标--><ol class="carousel-indicators"></ol><!-- 幻灯片包装器--><div class="carousel-inner"></div><!-- 控件--><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

类轮播内部是空的，您可以在那里放置用于轮播的图像.

class carousel-indicators 也是空的，会被 JS 填充.

然后是 JS:(正如我所说，我依赖于 m 是一个 imgs url 数组)

$(document).ready(function(){for(var i=0 ; i').appendTo('.carousel-inner');$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')}$('.item').first().addClass('active');$('.carousel-indicators > li').first().addClass('active');$('#carousel-example-generic').carousel();});

基本上，您将所有图像附加到类 carousel-inner，添加轮播控件 li，然后将活动类添加到第一个图像和第一个轮播指示器 li.，最后，初始化您的轮播.请注意，所有这些都在一个文档就绪函数中，这是您所缺少的.你所做的只是定义一个名为 onload 的函数

希望能帮到你！

我看到您还向图像输出了 alt 标签，但这不是我的答案，我敢打赌您可以毫无问题地做到这一点.

I'm trying to add slides to Bootstrap carousel using jQuery but it is not acting as a slider in the browser. Instead it's showing the images in list view.

<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
    onload=function(){

        for(var m=3;m>=0;m--)
        {
            var path="file_uploads/"+m+".jpg";
            $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=""+m+""></li>");
            $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");             
        }

        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
        $('.carousel').carousel();
    }
</script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
    <ol class="carousel-indicators">

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">       

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</body>
</html>

解决方案

First thing, I will rely on the fact that m is an array with proper url to your images.

The HTML should be like this:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Class carousel inner is empty, there is where you gonna place your images for then carousel.

Class carousel-indicatiors is also empty, will be filled by JS.

Then, comes the JS: (as I said, Im relying on the fact that m is an array of imgs url)

$(document).ready(function(){  
  for(var i=0 ; i< m.length ; i++) {
    $('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')

  }
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel-example-generic').carousel();
});

Basically, you append all your images to class carousel-inner, you add carousel control li's, then you add the active class to the first image and to the first carousel indicator li., and finally, you initialize your carousel. Note that all this is inside a document ready function, which is what you are missing. What you do is only define a function called onload

Hope it helps !

EDIT: I saw that you are outputting also alt tag to images, but thats something that not need to be on my answer, I bet you can do that without problems.

这篇关于使用 jQuery 动态地将幻灯片添加到 Bootstrap 3 轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆