I am currently working on implementing a slideshow within a modal using AngularJS and Bootstrap. My challenge lies in dynamically creating DIVs, but specifically adding the active class to only the first DIV.
Is there a way to achieve this without relying on jQuery?
Additionally, I am curious if there are alternative methods to accomplish the same functionality. Any suggestions or guidance would be greatly appreciated.
Below is the code snippet:
<!DOCTYPE html>
<html ng-app="modalApp">
<head>
<title>Custom Modal Implementation</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" id="carousel-in">
<div id="carouselContent">
</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){
// Creation of item div
$scope.carouselCon = document.getElementById("carouselContent");
$scope.newDiv = document.createElement("DIV");
$scope.newDiv.setAttribute("class", "item active");
$scope.carouselCon.appendChild($scope.newDiv);
// Creation of Image Element
$scope.image = document.createElement("img");
$scope.image.setAttribute("src", src);
$scope.image.setAttribute("class", "img-fluid d-block");
$scope.newDiv.appendChild($scope.image);
// Creation of Image Content
$scope.h3 = document.createElement("H3");
$scope.h4 = document.createElement("H4");
$scope.h3Content = document.createTextNode(head);
$scope.h4Content = document.createTextNode(desc);
$scope.newDiv.appendChild($scope.h3.appendChild($scope.h3Content));
$scope.newDiv.appendChild($scope.h4.appendChild($scope.h4Content));
};
$scope.carouselData("Screen.png", "Feature 1", "Here goes the description");
$scope.carouselData("Screen2.png", "Feature 2", "Here goes the description"); // More functions like this can be added.
}
})();