I am trying to use a button in order to navigate through the slides however it does not work. I have done this so far:
HTML:
<ion-slide-box>
<ion-slide>
<button ng-click="slide()">Next</button>
</ion-slide>
<ion-slide>
This is the next slide
</ion-slide>
</ion-slide-box>
JS:
function controllerClass($scope, $ionicSlideBoxDelegate) {
$scope.slide = function() {
$ionicSlideBoxDelegate.next();
console.log("Click");
}
}
It shows the log "Click" but I don't know what is wrong with the slider itself.
I could really use help.
I have made a small demo for you
Plunker
HTML
<div class="button-bar">
<a ng-repeat="button in buttons" ng-class="{'active': $index === current}" ng-click="slide($index)" class="button button-stable">{{ button.name }}</a>
</div>
<ion-slide-box on-slide-changed="slideHasChanged($index)" slide-interval="1000" does-continue="true">
<ion-slide>
<div class="box" style="text-align:center;">
First slide
</div>
</ion-slide>
<ion-slide>
<ion-slide>
<div class="box" style="text-align:center;">
Second slide
</div>
</ion-slide>
</ion-slide>
</ion-slide-box>
Contoller
$scope.buttons = [{
name: '1'
}, {
name: '2'
}];
$scope.slide = function($index) {
$scope.current = $index;
$ionicSlideBoxDelegate.slide($index);
}
If you need any additional feature.Please let me know?
import { Component,ViewChild } from '#angular/core';
import { Slides } from 'ionic-angular';
#Component({ selector: 'page-calender', templateUrl: 'calender.html' })
export class CalenderPage {
#ViewChild(Slides) slides: Slides;
constructor() {}
gotoNextSlide() { this.slides.slideNext(); }
gotoPrevSlide() { this.slides.slidePrev(); }
}
Kind of a late answer, but I've been struggling with this component for a while.
You can also call the slider methods directly, when initialized, just store the slider object inside your controller and then use it:
The HTML:
<ion-slides
options="ctrl.slideOptions"
slider="ctrl.slider"
style="margin: -13px 0 0; height: 19.1em;">
<ion-slide-page
ng-repeat="b in ctrl.slideCollection"
ng-click="transCtrl.selectSlide(b)">
<!-- slide content here -->
</ion-slide-page>
<div class="swiper-button-next icon ion-chevron-right" ng-click="ctrl.slideNext($event)"></div>
<div class="swiper-button-prev icon ion-chevron-left" ng-click="ctrl.slidePrev($event)"></div>
</ion-slides>
And the JS:
ctrl.slideOptions = {
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: false,
effect: 'coverflow',
coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
}
};
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
ctrl.slider = data.slider;
ctrl.activeIndex = 0;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
// note: the indexes are 0-based
ctrl.activeIndex = data.slider.activeIndex;
ctrl.previousIndex = data.slider.previousIndex;
});
ctrl.slideNext = function($event) {
ctrl.slider.onClickNext($event);
}
ctrl.slidePrev = function($event) {
ctrl.slider.onClickPrev($event);
}
The ng-click part is not always necessary, but if things do not work as expected it's nice to have a workaround.
I also have a tweak for the CSS buttons:
.swiper-button-next, .swiper-button-prev {
background: none;
}
Use it if you like Ionic icons better than the swiper ones (ugly blue caret...)
Related
I am learning Vue.js hence new to it. I am having difficulty to check whether my class is bonded dynamically. I am trying to add effect: when I hover over a card it should go up a little bit and change its color. Besides, not just css but also custom events are also not working.
Here is my card component:
Vue.component('card', {
props: ['def'],
template: `
<div class="card" :class="'type-' + def.type" #click="play">
<div class="title">{{ def.title }}</div>
<img class="separator" src="svg/card-separator.svg" />
<div class="description">
<div v-html="def.description"></div>
</div>
<div class="note" v-if="def.note">
<div v-html="def.note"></div>
</div>
</div>
`,
methods: {
play() {
this.$emit('play')
this.$emit('test_event_with_args', 'str_arg', 777)
}
},
mounted() {
this.$on("play", ()=> {
console.log("custom event play ni tutdim ready hook ni ichida")
})
this.$on('test_event_with_args', (str, num) => {
console.log(`Test_Event: str=${str}, num=${num}`);
})
}
});
Here is an excerpt from my css file:
.card:hover{
top: -5px
}
.card.type-attack{
background:#9b1b1b
}
.card.type-special{
background:#751b9b
}
.card.type-support{
background:#1b6e9b
}
I'm using the Swiper (https://www.npmjs.com/package/angular2-useful-swiper) to display a gallery of images and captions.
The code in the demo of this package iterates only through an array of image urls. I tried modifying by adding in a paragraph for image captions.
I want to iterate through 2 arrays (one is an array of links to the images, the other is an array of captions for the corresponding images.) I feel like this code almost works, it does iterate through both arrays, but it prints out 3 times, and not as a slider...
If there's a way to iterate through an array of objects (something I tried, but I got stuck with it too...)
Is there also a way to iterate through an array of classes and assign them to each div?
slider.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-symptoms-slider',
templateUrl: './symptoms-slider.component.html',
styleUrls: ['./symptoms-slider.component.scss']
})
export class SymptomsSliderComponent implements OnInit {
variants = [
'hvr-pulse-grow',
'hvr-buzz',
'hvr-wobble-vertical',
];
passes = [
'Caption 1',
'Caption 2',
'Caption 3',
'Caption 4',
'Caption 5',
'Caption 6',
];
slides: Slide[];
images = [
'../assets/images/swiper-symptoms/fatigue.png',
'../assets/images/swiper-symptoms/craving.png',
'../assets/images/swiper-symptoms/chewing.png',
'../assets/images/swiper-symptoms/restless.png',
'../assets/images/swiper-symptoms/cold.png'
];
config: Object = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 4,
spaceBetween: 30,
loop: true,
breakpoints: {
// when window width is <= 320px
767: {
slidesPerView: 3,
spaceBetween: 10
}
}
};
constructor() { }
ngOnInit() {
}
}
slider.component.html
<swiper class="swiper" [config]="config">
<div class="swiper-wrapper test">
<div class="swiper-slide">
<img [ngClass]="variants" *ngFor="let image of images" [src]="image">
<div class="caption"><p *ngFor="let pass of passes">{{pass}}</p></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
Remove your passes variable.
Change your images array to following:
images = [ {
'src':'../assets/images/swiper-symptoms/fatigue.png',
'caption':'Caption 1'
},
{
'src':'../assets/images/swiper-symptoms/craving.png',
'caption':'Caption 2'
},
{
'src':'../assets/images/swiper-symptoms/chewing.png',
'caption':'Caption 3'
},
{
'src':'../assets/images/swiper-symptoms/restless.png',
'caption':'Caption 4'
},
{
'src':'../assets/images/swiper-symptoms/cold.png',
'caption':'Caption 5'
}
];
Then change your html to following:
<swiper class="swiper" [config]="config">
<div class="swiper-wrapper test">
<div class="swiper-slide" *ngFor="let image of images">
<img [ngClass]="variants" [src]="image.src">
<div class="caption">
<p>{{image.caption}}</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
Here is a demo: PLUNKER DEMO
For some reason I am not able to see, my Carousel will not appear. My project requires slightly different implementation than what is defined here. It should work fine though, I've outlined the details below.
Clicking my button toggles openModal, where I specify my scope as modal:
openModal() {
var _this = this;
this.$uibModal.open({
animation: true,
templateUrl: 'components/directives/modals/Modal/Modal.html',
controller: 'ModalController',
controllerAs: 'modal',
size: 'lg',
}
});
}
In this controller I declare some variables in the constructor:
//Carousel Variables
this.active = 0;
this.currIndex = 0;
this.slides = [];
this.addSlide();
This calls my controller function addSlide:
addSlide() {
for (var i=0;i<4;i++) {
this.slides.push({
image: 'https://unsplash.it/600/300',
text: ['Getting Started', 'Awesome photograph', 'That is so cool', 'I love that'][this.slides.length % 4],
id: this.currIndex++
});
}};
HTML
<div style="height: 200px;">
<div uib-carousel active="modal.active" interval="0" no-wrap="false">
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
</div>
</div>
Change your markup from...
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
...to this...
<div uib-slide ng-repeat="slide in modal.slides" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>">
By including the modal. in there you are referencing a non-existent slide property on the controller when what you really want is to reference the slide object in your ng-repeat. (You also had slides in a couple places where I think you meant slide).
I have start.html file having options property having of the and I will define them in options1 in class StartPage
<ion-slide [options]="option1" *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
start.ts:
export class StartPage {
option1 = {
loop: true,
direction: 'vertical'
};
}
You need to add the options in the ion-slides component as shown in their docs.
<ion-slides [options]="option1">
<ion-slide *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image" />
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
</ion-slides>
In the new version of ionic we can easily achieve vertical scroll by passing [options] value to <ion-slides>.
Here is an example.
// page.ts
export class SlideClass {
slideOptions = {
direction: 'vertical',
};
constructor(){}
}
// html file
<ion-slides [options]="slideOptions">
More option we can found here more slide options
you can make your slides vertical by adding ''direction'' parameter.
<ion-slides direction="vertical">
</ion-slides>
by default slides are horizontal.
I can't load owl carousel in a angularjs dynamic content.
I use this (edited) html:
<div id="Galeria" owlcarousel class="youplay-carousel gallery-popup">
<a class="angled-img" href="http://www.youtube.com/watch?v={{video}}" ng-repeat="video in juego.Galerias.Videos">
<div class="img">
<img src="http://img.youtube.com/vi/{{video}}/maxresdefault.jpg" alt="">
</div>
<i class="fa fa-play icon"></i>
</a>
<a class="angled-img" href="/img/galerias/{{imagen}}" ng-repeat="imagen in juego.Galerias.Imagenes">
<div class="img">
<img src="/img/galerias/{{imagen}}" alt="">
</div>
<i class="fa fa-search-plus icon"></i>
</a>
</div>
and this (edited) directive to my app:
app.directive('owlcarousel', function() {
var linker = function(scope, element, attr) {
var loadCarousel = function() {
console.log(element);
element.owlCarousel({
loop: !0,
stagePadding: 70,
nav: !0,
autoplay: 0 ? !0 : !1,
autoplayTimeout: 0,
autoplaySpeed: 600,
autoplayHoverPause: !0,
navText: ["", ""],
responsive: {
0: {
items: 1
},
500: {
items: 2
},
992: {
items: 3
},
1200: {
items: 4
}
}
});
}
scope.$watch("juego.Galerias.Videos", function(value) {
loadCarousel(element);
});
scope.$watch("juego.Galerias.Imagenes", function(value) {
loadCarousel(element);
})
}
return {
restrict: "A",
link: linker
}
});
But i can't load the carousel every time i load new content. I try to bind jquery event, call function in controller...etc.
PD: I use ng-routes and load html dinamically.
You can pass models to directive scope, and then do scope.$watch and reinit owlCarousel with reinit method. It is just an idea, if you could specify plunkr or fiddle it would be easier to help.