Develop Reference

Deleting Active (centered) Item in OwlCarousel

I want the user to be able to delete the active/centered item in an OwlCarousel. The only piece of code I found w.r.t. deletion of items was this, so it seems to be a rather rare question:
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
It works, but refers to the current item ID within the carousel, i.e. doesnt work anymore if I give numbers from my static HTML without reindexing. Here's a fiddle:
https://jsfiddle.net/87x312wv/6
Is there any better way instead of counting the item-ID? I'm rather looking for something like - would be way more natural:
$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');
Any ideas?

I find a solution. For example, imagine that you want to remove each item by clicking on it:
html code:
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
js code:
$(".owl-item").on("click", function (event) {
var items = $(".owl-item");
items.each((index, item) => {
if (item.isEqualNode(event.currentTarget)) {
$(".owl-carousel")
.trigger("remove.owl.carousel", index)
.trigger("refresh.owl.carousel");
return;
}
});
});

I also found an answer, which might even be a little be better performance-wise: Reindex the items only once everytime: Basically setting the option onRefreshed: reindexItems, with the acompanied function, see below
https://jsfiddle.net/q23Lr90m/1/
$(document).ready(function() {
startCarousel();
$('span').on('click', function() {
var dat = $(this).parent().parent().parent().data();
console.log(dat);
var itm = dat.item;
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
})
});
function reindexItems() {
$(".owl-item:not(.cloned)").each(function(idx) {
//console.log('called');
$(this).attr('data-item', idx);
});
}
function startCarousel(){
$("#owl_about_main_slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 500,
margin:10,
onRefreshed: reindexItems,
paginationSpeed : 400,
autoplay:true,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
loop:true,
nav:true,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
});
}

Cannot load slick-carousel in angular 4 : Cannot load css

I am using slick-carousel in angular 4 slick-carousel
In my home.component.html
<div class="list-books" *ngIf="results?.length > 0">
<div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
<a>
<div class="mt-card-item">
<div class="mt-card-content">
<div class="row">
<div class="col-md-12">
<span>{{item.Name}}</span>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<span>{{item.Address}}</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="mt-card-name">{{item.Telephone}}</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
Inside my home.component.ts
$('.list-books').slick({
dots: false,
infinite: false,
speed: 300,
fade: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
The variable results holds the data to be filled in by the carousel. When the component loads I can se the data but could not load the css and breaks the UI. It looks the data comes first but cant load the css cannot figure it out
I have also added the css in my index.html and slick.min.js in my angular.json
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css" />
"node_modules/slick-carousel/slick/slick.min.js"
Any idea about what could be done. Any help would be appreciated.

Here try Try to add a timeout for your init()
setTimeout(() => { //you slick-carousel init code }, 1000);
In angular js version it worked as suggested by Nick njj

In angular.json it has a section like:
"styles": [
"//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css",
],
Or if you want add your src/style.css
#import "//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css";
And other hand I have found a working example on stackBlitz
example

Why is my carousel with an empty item at the end?

I have two carousels on my page using owl-carousel. Both show an empty last item. I'm a beginner and I have no idea on how to solve this. Can somebody help me?
I'm using twig to loop trough my php array.
<section id='noticia-carousel' class='pt-0'>
<div class='container main-container'>
<div class='owl-carousel owl-theme'>
{% for noticia in noticias_principais %}
<div class='box'>
<img src='{{noticia.imagem_capa}}' alt='Imagem referente à notícia {{noticia.titulo | striptags}}'>
<div class='titulo'>
<h4><a href='noticia/{{noticia.id}}'> {{noticia.titulo | striptags}} </a></h4>
</div>
</div>
{% endfor %}
<div class="owl-controls">
<div class="owl-nav">
</div>
</div>
</div>
<div class='text-center'>
<button class='btn btn-secondary' onclick="window.location.href='/noticias'">Todas
as Notícias </button>
</div>
</div>
</section>
$('#noticia-carousel .owl-carousel').owlCarousel({
items: 2,
dots: false,
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
animateOut: 'fadeOut',
autoplay: true,
loop: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 2
},
1300: {
items: 2
}
}
});
Here is how it looks right now: https://educacao.ouropreto.mg.gov.br/
Works great, but the last item is empty. I want it to autoplay and loop.

This HTML after your {% for %} loop has become an item in your carousel because it is a child of .owl-carousel:
<div class="owl-controls">
<div class="owl-nav"></div>
</div>
Remove it and there will be no extra space in the carousel.

Angular-carousel is not working in a safari browser

I have integrated Angular carousal in my project it's working fine in all browser except the Safari.
I have taken reference from angular-carousel.
i did in my project
in index.html i have included below files:
<script src="js/carousel/angular-swipe.js"></script>
<script src="js/carousel/angular-carousel.js"></script>
<script src="client/html/carouselController.js"></script>
<div class="row" ng-controller="DemoCtrl">
<div class="col-sm-12">
<ul class="my-slider" rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-control>
<li ng-repeat="slide in slides|limitTo:5" ng-style="{'background-image': 'url(' + slide.img + ')'}">
<div class="debug">
{{ slide.label }} / {{ slides.length }}
</div>
</li>
</ul>
</div>
</div>
</div>
in app.js
var app = angular.module("demoApp",
["ngRoute", "ngSanitize", "ngResource", "ui.bootstrap",
"angularMoment", "blockUI",'facebook','directive.g+signin',
"angular-carousel","swipe"
]);
and also added controller of the given reference.
How can i support it in Safari?

I'm use jquery.carouFredSel.js for Angular apps
For example, in directive
restrict: 'E',
controller: [ "$scope", function($scope) {
var slides = $scope.slides = [];
// Add slides here
slides.push({
image: '',
alt: ''
});
}],
link: function($scope, element, attrs) {
$scope.$watch('mycarousel', function() {
// this jquery.carouFredSel.js example setup begin
$('#mycarousel').carouFredSel({
width: '100%',
items: {
visible: 'odd+2'
},
scroll: {
pauseOnHover: true,
onBefore: function() {
$(this).children().removeClass( 'hover' );
}
},
auto: {
items: 1,
easing: 'linear',
duration: 1250,
timeoutDuration: 0
},
pagination: {
container: '#pager',
items: 1,
duration: 0.5,
queue: 'last',
onAfter: function() {
var cur = $(this).triggerHandler( 'currentVisible' ),
mid = Math.floor( cur.length / 2 );
cur.eq( mid ).addClass( 'hover' );
}
}
});
// setup carousel end
})
},
In HTML template
<div id="wrapper"><div id="mycarousel">
<div ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" alt="{{slide.alt}}" width="200" height="200" />
<span>{{slide.alt}}</span>
</div>
</div><div id="pager">
</div></div>

Owl Carousel With Dynamic Content - Prev/Next Navigation Not Working

I am using jquery owl carousel plugin to dynamically present html page components to the users.
The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.
Here is the codes:
Options
var owlcarousel_obj = {
loop: true,
nav: true,
navContainer: "#cv-navigation",
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: true,
dotsEach: true, */
navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'],
nestedItemSelector: "owl-item",
responsive:{
0:{
items:1,
},
320:{
items:2,
},
480:{
items:3,
},
768:{
items:4,
},
1000:{
items:6,
}
}
};
initialize owl carousel
var vartcarousel = $("#cv-contents");
vartcarousel.owlCarousel(owlcarousel_obj);
I added this custom trigger, but still not working
$(".nav-arrow-left").on("click touch", function(){
vartcarousel.trigger("next.owl.carousel");
});
$(".nav-arrow-right").on("click touch", function(){
vartcarousel.trigger("prev.owl.carousel");
});
Load contents dynamically
$(".call-header").on("click touch", function(e){
var comvars = $("#packagename-variations-group").html();
vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel");
e.stopImmediatePropagation();
});
HTML
<div id="cv-header" class="d-table">
<span class="cv-header-text pull-left">Test</span>
<span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span>
<div id="cv-navigation" class="pull-right d-tcell"></div>
<div class='clear'></div>
</div>
<div id="cv-contents" class="">
</div>
How to solve this problem?

The owlCarouel object is now linked to the object with the "data" jQuery binder, and uses its own prev / next methods, use it like that :
var varcaroulsedata = varcarousel.data('owlCarousel');
$(".nav-arrow-left").on("click touch", function(){
varcaroulsedata.prev();
});
$(".nav-arrow-right").on("click touch", function(){
varcaroulsedata.next();
});