Hi Jim,
I used the bootstrap carousel in a gutted version of the announcements widget. If you'd like I can show you what I did there.
It looks like this:
It's one of those things I would swear I'd seen in the wild, but I couldn't seem to find it for the life of me, so I went ahead and built it. It's not exactly what you're doing, but it might give you an idea of where to start if you're trying to display something other than images.
Edit: I'm going to guess from the 'helpful' that this is something folks might be interested in. Here's what I did in more detail:
First, I created a new announcement type called "search tips". That would let me easily designate which announcements would show up on the slider. Using the announcement table gave me all of the features it has (like the icon and expiration logic) for free, but you could easily configure this entire part with an extended or entirely custom table.
Next, the widget:
Most of the customization for this part is in the HTML. Bootstrap is pretty flexible about where you put the carousel controls, so I moved everything around and removed a ton of detail:
<div id="carousel-tips" class="carousel slide '{{::c.wid}}'" data-ride="carousel">
<div class="row">
<div class="controls">
<!-- Controls -->
<i data-target="#carousel-tips" data-slide="prev" class="fa fa-caret-left fa-lg"></i>
<i data-target="#carousel-tips" class="fa fa-caret-right fa-lg" data-slide="next"></i>
</div>
<div class="carousel-inner">
<div ng-repeat="a in c.announcements" class='item' ng-class="{'active' : $index == 0}" ng-init="c.linkSetup(a)">
<a class="info-link" ng-href="{{::a.targetLink}}" target="{{a.linkTarget}}" aria-label="{{a.title}}" tabindex="{{a.expanded ? 0 : -1}}">
<i class="fa fa-{{::a.glyph}} padding-right"></i>
<span ng-bind="::a.title"></span>
</a>
</div>
</div>
</div>
</div>
The CSS is pretty simple but it's important, especially if you're putting it under the homepage search:
.controls {
display: inline-block;
vertical-align:middle;
margin-left:10px;
line-height: 1.5em;
}
.carousel-inner {
width: 90%;
display: inline-block;
vertical-align:middle;
line-height: 1.5em;
margin-left:10px;
}
.row{
}
In terms of the client script, most of what I did was removal. One major difference was manually kicking off the slider; with everything else going on on the homepage, it wasn't kicking off automagically so I forced the issue.
function($scope, $timeout, $location, spAnnouncement, spUtil, spAriaUtil) {
var c = this;
c.wid = 'spw-announcements-' + new Date().getTime();
c.accessibilityOff = spAriaUtil.g_accessibility === 'false';
c.announcements = [];
c.totalAnnouncements = 0;
//initalize announcements
c.goToPage = function(page, firstLoad) {
var result = spAnnouncement.get(spAnnouncement.filterOnType(c.options.type), c.options.max_records, page);
c.currentPage = page;
c.totalPages = result.totalPages;
c.totalRecords = result.totalRecords;
c.announcements = result.data;
c.totalAnnouncements = result.data.length;
};
//used to determine link target for page link
c.linkSetup = function(a) {
a.linkTarget = '_self';
if ('urlNew' === a.clickTarget) {
a.linkTarget = '_blank';
}
a.linkType = !a.targetLink ? 'none' : a.targetLinkText ? 'normal' : 'title';
};
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
c.goToPage(1, true);
}
And the server script I pretty much left alone.
That's it; if anyone has questions feel free to let me know.
