I am trying to make a slideshow (Bootstrap Carousel) inside a Bootstrap modal. For that matter, I want to dynamically add new slide containers giving data using AngularJS. So far, I am able to make slide 1 and have done that using objects and then passing values to them through functions.
I want to pass 3 or four functions with content like, images, description and heading and the code should add new items in the carousel.
here is the index.html
<!DOCTYPE html>
<html ng-app="modalApp">
<head>
<title>This is a custom modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="modalAppController">
<button class="btn btn-primary" data-toggle="modal" data-target="#whatsNewModal">Open Modal</button>
<!-- Whats New feature modal -->
<div id="whatsNewModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3 class="modal-title" style="color: #000"><strong><i class="fa fa-bullhorn" style="margin-right: 10px"></i><span>What's New</span></strong></h3>
</div>
<!-- Modal Body/Modal Content -->
<div class="modal-body">
<div id="whatsNewCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Carousel Images -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img ng-src="{{modalContent.Src}}" alt="New Features Screenshots" class="img-fluid d-block">
<hr>
<div class="content">
<center>
<h3>{{modalContent.Head}}</h3>
<h4>{{modalContent.Desc}}</h4>
</center>
</div>
</div>
<!-- Carousel Controls -->
<a class="left carousel-control" href="#whatsNewCarousel" role="button" data-slide="prev" style="background: transparent">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="color: #dcdde1; top: 40%; left: 10px; font-size: 40px"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#whatsNewCarousel" role="button" data-slide="next" style="background: transparent">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color: #dcdde1; top: 40%; right: 22px; font-size: 40px"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('modalApp', [])
.controller('modalAppController', modalAppController)
modalAppController.$inject = ['$scope'];
function modalAppController($scope){
$scope.carouselData = function(src, head, desc){
$scope.modalContent = {
Src : src,
Head: head,
Desc: desc
};
};
$scope.carouselData("Screen.png", "Feature 1", "Here goes the description");
$scope.carouselData("Screen2.png", "Feature 2", "Here goes the description"); // I want to pass more functions like this.
}
})();
