0
I’m using that lib: angular-ui-Carousel
This plugin has a compiled template, so it does not allow you to use ng-if in the scope, use only ng-show / ng-Hide. It keeps as a rule the key "item" to pick an ng-repeat item within the scope of the carousel, if you need to call some method internally, it should be in the collection, example:
app.controller("ctrl", [
"$scope",function($scope) {
'use strict';
$scope.recentes = [
{id:1, imagem:"/path/img2.jpg",
is_content_hide:false,
num_slide: 0,
displayItem: function(){
console.log(this);
}},
{id:2, imagem:"/path/img2.jpg",
is_content_hide:false,
num_slide:1,
displayItem: function(){
console.log(this);
}}
];
}]);
What I was able to do was just activate next / Prev by dragging, but it’s not a Swipe event, as it could improve this?
$scope.navigationGallery = function() {
$(function() {
var start_client_x = null, start_client_y = null;
var current_client_x = null, current_client_y = null;
$(document).on("touchstart touchend", '.track-wrapper', function(e) {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (e.type == 'touchstart') {
//has_permission_swipe = false;
start_client_x = null;
start_client_y = null;
start_client_x = parseInt(touch.clientX);
start_client_y = parseInt(touch.clientY);
}
if (e.type == 'touchend') {
e.stopImmediatePropagation();
current_client_x = parseInt(touch.clientX);
current_client_y = parseInt(touch.clientY);
if (!start_client_x) {
return;
}
var xDiff = parseInt(parseInt(start_client_x) - parseInt(current_client_x));
var yDiff = parseInt(parseInt(start_client_y) - parseInt(current_client_y));
if (Math.abs(xDiff) < Math.abs(yDiff) || Math.abs(xDiff) < 10) {
return;
}
var meia_tela = parseInt(window.innerWidth / 2);
if (start_client_x!= null) {
start_client_x = null;
start_client_y = null;
current_client_x = null;
current_client_y = null;
if (xDiff < 0 || (meia_tela < parseInt(current_client_x) && xDiff < meia_tela)) {
/* left swipe */
var btn = $(this).parent().parent().find('.carousel-prev .carousel-btn');
btn.trigger('click');
} else {
/* right swipe */
var btn = $(this).parent().parent().find('.carousel-next .carousel-btn');
btn.trigger('click');
}
}
}
});
});
}
$scope.navigationGallery();
HTML of the carousel:
<div id="c_recentes" data-ui-type="recentes" class="box-slides-recentes" ng-if="recentes.length > 0" >
<div ng-class="{'opacity-loading':!show_slide.recentes}">
<ui-carousel
on-after-change="singleAfter(currentSlide, 'recentes')"
on-before-change="singleBefore(currentSlide, 'recentes')"
slides="recentes"
slides-to-show="show_recentes_slides"
slides-to-scroll="scroll_recentes_slides || 1"
autoplay="false"
autoplay-speed="2000"
initial-slide="slide_start.recentes"
infinite="false"
arrows="nextActive('recentes')"
dots="false">
<carousel-item>
<div class="action" ng-class="{'hide-content':(item.is_content_hide)}">
<div class="slide-item">
<div ng-show="item.id > 0" class="slide-container">
<a href="javascript:void(0)" id="slide_re_{{($index - item.num_slide) + 1}}" ng-click="item.displayItem();">
<div class="container-info">
<figure class="tint">
<img id="img_recentes_{{item.id}}" ng-src="{{item.imagem}}" class="img-scroll">
</figure>
</div>
</a>
</div>
</div>
</div>
</carousel-item>
<carousel-prev>
<div data-ui-button="recentes" class="nav-recentes left">
<div class="nav-align">
<button class="prev_recentes carousel-prev carousel-btn">
<span class="combo icon-caret-left" aria-hidden="true"></span>
</button>
</div>
</div>
</carousel-prev>
<carousel-next>
<div data-ui-button="recentes" class="nav-recentes right">
<div class="nav-align">
<button class="next_recentes carousel-next carousel-btn">
<span class="combo icon-caret-right" aria-hidden="true"></span>
</button>
</div>
</div>
</carousel-next>
</ui-carousel>
</div>