list: [
{
"pID": "7",
"pDate": "2018-03-19 17:39:08",
"pTitle": "Gallery 2",
"pGalleryImages": [
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/20.jpeg"
}
]
},
{
"pID": "8",
"pDate": "2018-03-19 17:39:08",
"pTitle": "Gallery 3",
"pGalleryImages": [
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/19.jpeg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/17.png"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/18.jpeg"
}
]
},
{
"pID": "1",
"pDate": "2018-03-16 11:33:26",
"pTitle": "Gallery 4",
"pGalleryImages": [
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/4.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/5.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/3.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/2.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/1.jpg"
}
],
"pParameters": [
{
"label": "Joe 1"
},
{
"label": "Joe 2"
},
{
"label": "Joe 3"
}
]
},
{
"pID": "2",
"pDate": "2018-03-16 11:52:43",
"pTitle": "Gallery 5",
"pGalleryImages": [
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/6.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/7.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/8.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/9.jpg"
},
{
"src": "https://joedev.generatorvrs.com/pub/gallery/1000x600/10.jpg"
}
]
}
]
<div class="container-fluid ">
<!--
<button class="btn btn-default btn-next"
ng-click="model.selected = (model.selected < list.length) ? model.selected +1 : list.length;
model.gallerySelected = []"> Next
</button>
<button class="btn btn-default btn-prev"
ng-click="model.selected = (model.selected > 0) ? model.selected -1 : list.length - 1"> Prev
</button>
-->
<!-- Navigation Menu -->
<div class="button-wrapper">
<div class="button btn-prev"
ng-click="model.selected = (model.selected > 0) ? model.selected -1 : list.length - 1">
</div>
<div class="button btn-next"
ng-click="model.selected = (model.selected < list.length -1) ? model.selected +1 : 0;
model.gallerySelected = []">
</div>
</div>
<div class="gallery-slider-wrapper full"
ng-style="{'background-color':moduleConfig.color}"
ng-init="model.selected = (model.selected === undefined || model.selected === null) ? 0 : model.selected;">
<!-- get length: {{ list.length }} -->
<div class="gallery-slider-inner relative-div "
ng-style="{
'width': 100 * list.length +'%',
'left' : '-' + model.selected + '00%'
}">
<div ng-repeat="item in list"
ng-class="'id-' + item.pID"
ng-style="{
'background-image' : 'url(' + item.pGalleryImages[0].src + ')',
'width' : 100/list.length +'%'
}"
class="slide">
<h1>#{{ item.pID }}</h1>
<br />
<h3>{{item.pTitle}}</h3>
</div>
</div>
</div>
<!---
hm-swipe-right
hm-wipe-left
-->
</div> <!--- end container-fluid -->