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
Related
I was using swiperjs to create a slider in which 3 images show at once and it will loop infinite, but when I added images to that slide it acts weird and began to show blank spaces after the last slide screenshot attached below:
here's my HTML code same as the swiper documentation provided
<div>
<div class="swiper mySwiper w-11/12 h-full">
<div class="swiper-wrapper flex justify-center items-center ease-linear">
<!-- Swiper Slides embedded using DOM -->
</div>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
<div class="swiper-pagination"></div>
</div>
and now here is JavaScript
First, I embed the images into the swiper-wrapper using the js script
let images = ['img1.webp', 'img2.webp', 'img3.webp', 'img4.webp', 'img5.webp'];
document.querySelector('.mySwiper > .swiper-wrapper').innerHTML = images.map((img,index) => {
return `
<div key="${index}" class="swiper-slide">
<img
class="block object-cover object-center w-full h-full rounded-xl"
src="./images/${img}"
alt="gallery"
/>
</div>`
}).join('')
Then, I initialise the slider
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
// when window width is >= 480px
1023: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.loopDestroy();
So I am using Swiper.js for a multi-layered carousel on angular app. Essentially there was three swiper-containers, who's functionalities are supposed to complement each other. It is an extention of their Swiper thumbs gallery, where I added an extra crousel with description to the images.
Issues:
When I click on a thumnail, the main image is no selected along with it. I need it to work like the image description. Simply put, when one clicks on a thumnails, the image description and the image preview should both change correspondingly.
Oddly the Pagition count is wrong. It says 6, instead of the correct number 8.
Below is the component html:
<section class="gallery-section">
<div class="gallery-left">
<div class="swiper-container gallery-text">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<div class="image-controls">
<div class="swiper-button-prev swiper-button-mobile"></div>
<div class="swiper-pagination swiper-pagination-mobile"></div>
<div class="swiper-button-next swiper-button-mobile"></div>
</div>
<div class="image-info">
<div class="image-description">{{ image.description }}</div>
<div class="image-date">{{ image.date }}</div>
</div>
</div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-desktop"></div>
<div class="swiper-button-prev swiper-button-desktop"></div>
<div class="swiper-pagination swiper-pagination-desktop"></div>
</div>
<div class="gallery-right">
<div class="swiper-container gallery-main">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
Here is initialisation from the ts file:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
freeMode: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
watchSlidesVisibility: true,
watchSlidesProgress: true
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
});
}
Finally, a GIF which will hopefully make my issue easier to understand.
Figured it out:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
thumbs: {
swiper: galleryThumbs
}
});
galleryText.controller.control = galleryMain;
galleryMain.controller.control = galleryText;
});
}
My JSON looks like this:
users: [
{ 'name': 'User 1'},
{ 'name': 'User 2'},
{ 'name': 'User 3'},
{ 'name': 'User 4'},
{ 'name': 'User 5'},
{ 'name': 'User 6'},
]
Now i am looping this and i am displaying in the same div, But i need to diaplay the data by these conditions:
Up to length 3 should display in one div and rest things should display in another div(Ex another div right to that div). Here the JSON will be dynamic, The length may be <3 or >3. My requirement looks like this:
JSFiddle link
Vue is convenient to accomplish such tasks.
You need another two computed properties based on users.
template:
<div>{{left}}</div>
<div>{{right}}</div>
computed: {
left: function(){
return this.users.slice(0, 3);
},
reight: function() {
return this.users.slice(3);
}
}
Another option: https://jsfiddle.net/kth61cLu/1/
<div id="app">
<h3>Users</h3>
<div class="users1">
<div v-for="(user, index) in users" v-if="index < 3">
<p>{{user.name}}</p>
</div>
</div>
<div v-if="users.length > 3" class="users2">
<div v-for="(user, index) in users" v-if="index > 3">
<p>{{user.name}}</p>
</div>
</div>
</div>
Create a computed property that splits your array into two with the first having three elements and the second having the rest.
Then loop over the splitUsers array to display.
new Vue({
el: '#app',
data: {
users: [{"name":"User 1"},{"name":"User 2"},{"name":"User 3"},{"name":"User 4"},{"name":"User 5"},{"name":"User 6"}]
},
computed: {
splitUsers () {
const split = [ this.users.slice(0, 3) ]
if (this.users.length > 3) {
split.push(this.users.slice(3))
}
return split
}
}
})
#app { display: flex; }
#app div { padding: 1rem; border: 1px solid black; }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<div v-for="chunk in splitUsers">
<p v-for="user in chunk">{{ user.name }}</p>
</div>
</div>
OK, here is what you can try.
<h3>Users</h3>
<div v-for="(user) in users.slice(0,3)">
<p>{{user.name}}</p>
</div>
<div v-for="(user) in users.slice(3)">
<p>{{user.name}}</p>
</div>
Hope it helps!
I'm currently using the Swiper (https://www.npmjs.com/package/angular2-useful-swiper) to create a gallery of images.
Is it possible to dynamically change the class of a div by iterating through an Array of objects and using ngClass? I'm not sure if it is supported with interpolation.
The error that I keep getting says "Identifier 'style' is not defined. 'Array' does not contain such a member.' But why is it that ngStyle, the h4 and p are able to grab the elements and iterate through it if that's the case?
slider.component.html
<div class="swiper-container">
<swiper class="swiper" [config]="config">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of images">
<div class="swiper-slide--container">
<div class="symptom-slide-img"
[ngClass]="images.style" [ngStyle]="{'background-image': 'url(' + image.src + ')'}"></div>
<div class="caption">
<h4>{{ image.title }}</h4>
<p>{{ image.caption}}</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
</div>
slider.component.ts
import { Component, OnInit } from '#angular/core';
import { NgClass } from '#angular/common';
#Component({
selector: 'app-symptoms-slider',
templateUrl: './symptoms-slider.component.html',
styleUrls: ['./symptoms-slider.component.scss']
})
export class SymptomsSliderComponent implements OnInit {
images = [ {
'src': './path/image.png',
'title': 'Title',
'style': 'hvr-pulse-grow',
'caption':
'Caption'
},
{
'src': './path/image.png',
'title': 'Title',
'style': 'hvr-buzz',
'caption':
'Caption'
},
{
'src': './path/image.png',
'title': 'Title',
'style': 'hvr-wobble-vertical',
'caption':
'Caption'
},
{
'src': './path/image.png',
'title': 'Title',
'style': 'hvr-wobble-vertical',
'caption':
'Caption'
},
];
constructor() { }
ngOnInit() {
}
}
typo
[ngClass]="images. to [ngClass]="image. (remove unnecessary 's')
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...)