Here is the official example in the documentation about the angular-ui-bootsratp carousel.
But I could not replicate it in my own case, as the slide.active is not working.
<uib-carousel interval="1000" no-wrap="false">
<uib-slide ng-repeat="slide in slides" active= "slide.active">
<div class="col-md-8 col-md-offset-2 text-center"><h3>{{ slide.Title }}</h3></div>
<img ng-src="{{slide.Image }}" style="margin:auto;">
<div class="carousel-caption">
<div class="col-xs-7">
<p>{{ slide.Content }}</p>
</div>
</div>
</uib-slide>
</uib-carousel>
Also where do they set up the slide.active value at the first place in the documentation? I did not see they set it up in the controller. Do I need to set it up? Am I missing anything?
Related
I am using ionic -v1 for my app. This is my code for showing data in two side by side columns.
<div class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
The problem is it is showing only two results.
Can u please tell me y is that and how to fix this.?
And how can i use image-cards instead of article.?
i have use when two column display
angular-masonry
the demo follow this Link
if you implement then you can use image-cards instead of article
Your code something like that after implement the angular-masonry
<div masonry class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
I am trying use ng-animate so far without success. I animate different part of my program and everything is working fine. But in this part I don't know what directive I shout use. I tried #singleQuestionAnswer.ng-enter .. ng-leave but didn't work.
<div class="row" id="singleQuestionAnswer">
<div class="column" >
<h3>$ctrl.quizQuestions[$ctrl.activeQuestion].question}}</h3>
<div class="row">
<div layout="column" ng-repeat="answer in $ctrl.answers">
<div class="answer" layout-padding>
<md-checkbox ng-checked="$ctrl.existAnswer(answer, $ctrl.answersSelected)" >
{{answer}}
</md-checkbox>
</div>
</div>
</div>
</div>
</div>
<md-button ng-click="$ctrl.answered($ctrl.active)" >Submit answer</md-button>
i have this code for displaying images using slick.js.
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
</div>
and below is the output.
if i use three different divs than it works fine but not with ng-repeat.
instead it should come in a single row as originally slick js works.
Try by adding a data attribute to your declaration
Example,
<slick infinite="true" data="myArray" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div class="row">
<div ng-repeat="var in myArray" class="slick-item">
<div class="col-md-4 truckImage truck-error"></div>
</div>
</div>
</slick>
</div>
I think it will work for you, let me know if it is not working. i have just added <div class="row"> and then <div class="col-md-4 truckImage truck-error"></div>
I'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?
Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?
<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
<li data-ng-repeat="story in vm.stories" class="grid">
<!--Carousel-->
<slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
<div ng-repeat="image in story.images">
<img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle">
</div>
</slick>
</li>
</ul>
Have you tried this awesome carousel . You can change the perspective to make images as a grid.
Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.
<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
<div>
<div
class="cards-wrap"
angular-grid="vm.stories"
ag-grid-width="400"
ag-gutter-size="20"
ag-id="gallery"
ag-scroll-container="'#content-scroller'"
ag-infinite-scroll="vm.loadMoreStories()"
performantScroll="true">
<div class="card" ng-repeat="story in vm.stories">
<slick fade="true" dots="true">
<div ng-repeat="image in story.images">
<img data-lazy="{{ image.filename}}" aria-label="Image">
</div>
</slick>
<div class="inside">
<h3>{{story.title}}</h3>
<div class="description">{{ story.text }}</div>
</div>
</div>
</div>
<div class="loading-more-indicator" ng-show="vm.loadingMore">
<md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
</div>
</div>
</md-content>
<div>
I've installed angular-masonry and tried to use it with my single-page Bootstrap view. The images from the ng-repeat directive render but only in a single column. I am not able to figure out why and I am not getting any JS errors.
This is my view:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>
Official Docs:
You still need to use masonry-brick either as class name or element attribute on sub-elements in order to register it to the directive.
Don't you need the masonry-brick class or attribute?
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
or
<div masonry-brick ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
Final sample:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>