Presenting my owl crousal:
<section id="intro">
<div class="sm-holder">
<div class="sm">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<h1>
<span class="year">2020</span>
</h1>
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;">
<div class="owl-item cloned active">
<div class="item" style="background: url(../Administration/MainPageHeader/camels1.jpg)">
</div>
</div>
<div class="owl-item cloned">
<div class="item" style="background: url(../Administration/MainPageHeader/camels5.jpg)">
</div>
</div>
</div>
</div>
</div>
<div class="owl-counter"></div>
</section>
Everything appears to be working fine.
Now,
I am looking to make it dynamic.
I want to repeat
and change camels1.jpg based on values from the database.
I have developed an Angular application.
In my scope
I have
$http.get('http://192.168.1.40/Test/Apis/GetHeaderImages.ashx')
.then(function (response) {
$scope.headerImages = response.data;
var arr2 = JSON.parse(JSON.stringify(response.data));
$scope.headerImages = arr2;
});
here headerImages = 0: {Id: 5, ImageUrl: "camels7.jpg"} 1: {Id: 6, ImageUrl: "20202902051438KC.jpg"}
I have successfully executed the task.
Welcome to
Camel Racing Union
2020
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer" >
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;"id="owl-stage">
<div class="owl-item cloned" ng-repeat="x in headerImages" >
<div class="item" style="background: url(../Administration/MainPageHeader/{{x.ImageUrl}})">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="owl-counter"></div>