I've been working with Angular and UI Bootstrap components to create a carousel using the templateUrl argument for slide rendering. However, I've encountered some issues along the way. Firstly, nothing seems to appear on the page when I run it, and I'm also getting two errors:
- https://docs.angularjs.org/error/$compile/ctreq?p0=carousel&p1=slide
- Multiple directives [carousel, slide (module: ui.bootstrap.carousel)] asking for transclusion on:
Below is a snippet of my code:
<section id="slider">
<!--slider-->
<div class="container">
<div class="row" ng-controller="homeCarouselCtrl">
<div class="col-sm-12">
<carousel interval="myInterval" no-wrap="noWrapSlides" template-url="pages/templates/offer-product-tplt.html"/>
</div>
</div>
</div>
controller
mainApp.controller('homeCarouselCtrl', ['$scope', function ($scope)
{
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.slides = [
{
slideTitle: 'Free E-Commerce Template',
slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
slideImage: '../../images/home/cat1.jpg'
},
{
slideTitle: '100% Responsive Design',
slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
slideImage: '../../images/home/cat2.jpg'
},
{
slideTitle: 'Free Ecommerce Template',
slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
slideImage: '../../images/home/cat3.jpg'
}
];
}]);
template: offer-product-tplt.html
<slide ng-repeat="slide in slides" active="slide.active">
<div class="col-sm-6">
<h1><span>E</span>-SHOPPER</h1>
<h2>{{slide.slideTitle}}</h2>
<p>{{slide.slideText}}</p>
<button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
<img src="../../images/home/girl1.jpg" class="girl img-responsive" alt="" />
<img src="../../images/home/pricing.png" class="pricing" alt="" />
</div>
</slide>
Can you help me spot where I may have gone wrong in my implementation?