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>"]
});
}

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.

Owl-Carousel2 - set dotsData

I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?

Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>

So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)

If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})

Owl Slider - Duplicate Controls Issue

firstly here's the fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
There are two instances of owl slider with custom controls each generated by its own code, the problem is, when the controls are clicked both the sliders respond instead of the respective slider responding.
HTML:
<div class="customNavigation">
<a class="btn prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn next">
<i class="fa fa-chevron-right"></i>
</a>
JS:
// Custom Navigation Events
$(".next").click(function(){
slider1.trigger('owl.next');
})
$(".prev").click(function(){
slider1.trigger('owl.prev');
})
The code is a bit long (but very simple), please have a look at the fiddle
This must be a javascript issue, something must be changed somewhere, I tried changing the class names of buttons but they stopped working.

$(".next") action affects to all next css class. Use different CSS class or use a more complex expression like #slider1 > .next if buttons are inside the slider or changing .next with .nextslider1 and .nextslider2
example (http://jsfiddle.net/krish7878/m2gnrx2v/1/)
Html:
<div class="container">
<div id="slider-1">
...
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
...
<div class="container">
<div id="slider-2">
...
</div>
<div class="customNavigation">
<a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
<a class="btn next2"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
Javascript:
$(document).ready(function() {
var slider1 = $("#slider-1");
slider1.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); });
var slider2 = $("#slider-2");
slider2.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next2").click(function(){ slider2.trigger('owl.next'); });
$(".prev2").click(function(){ slider2.trigger('owl.prev'); });
});
Also you can make it smaller using a function that composes each slider
function doSlider(num){
var slider = $("#slider-" +num);
slider.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next"+num).click(function(){slider.trigger('owl.next');});
$(".prev"+num ).click(function(){slider.trigger('owl.prev');});
}
$(document).ready(function() {
doSlider(1);
doSlider(2);
});

You use the same click event for each set of buttons.
I changed your html to:
<div class="customNavigation">
<a class="btn1prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
<i class="fa fa-chevron-right"></i>
</a>
and the js accordingly:
// Custom Navigation Events
$(".btn1next").click(function(){
slider1.trigger('owl.next');
})
$(".btn1prev").click(function(){
slider1.trigger('owl.prev');
})
Notice the btn1next and btn1prev. I did the same thing for the 2nd buttons.
The js fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/

Issues with custom audio player JS & CSS

I am trying to create a page with 12 different sound files and the ability to use a custom audio-player to play, pause, progress, and mute for each file. I have created a custom audio-player class, but the only way I can get each file to work is to give them their own ID and then call a new function every time. Is there a cleaner way to do this instead of having the same function repeated 12 times?
HTML
<div id="column1">
<ol>
<li>
<span class="name">Diaphragmatic Breathing</span>
<span class ="info"> - Dr. Allan Vives, Georgia Southern University</span>
<span class="time">(<a class = "readmore" href="http://studentsupport.georgiasouthern.edu/counseling/resources/self-help/relaxation-and-stress-management/" target="_blank"> Read More</a>, 9:15 Mins, 12.6MB)</span>
<div class="audio-player">
<audio id="audio-player" src="../audio/breathing/Diaphragmatic Breathing.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</li>
</ol>
</div>
<div id="column2">
<ol>
<li>
<span class="name">Breathing Relaxation Exercise 4-6-8 </span>
<span class ="info"> - Jason Sackett, University of Southern California</span>
<span class="time">(<a class = "readmore" href="http://www.usc.edu/programs/cwfl/wellness/relaxation.html" target="_blank"> Read More</a>, 2:33 Mins, 2.9MB)</span>
<div class="audio-player1">
<audio id="audio-player" src="../audio/breathing/breathing_relaxation_exercise-4-6-8.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</li>
</ol>
</div>
<script type="text/javascript">
$(function(){
$('#audio-player1').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause', 'progress','volume'],
audioWidth: 450,
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
</script>
<script type="text/javascript">
$(function(){
$('#audio-player2').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause', 'progress','volume'],
audioWidth: 450,
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
</script>
<script type="text/javascript">
$(function(){
$('#audio-player3').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause', 'progress','volume'],
audioWidth: 450,
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
</script>

Rather than using an id for each element, give them all the same class and then you only need to do this once:
$(function(){
$('.className').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause', 'progress','volume'],
audioWidth: 450,
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
Where .className is whatever class you chose to give the elements.

Or if you don't want to touch the markup, you could just change your selector from
$("#audio-player1").mediaelementplayer({ ... });
To
// add this range generator
var fn = function(t,n,i){ return i>=n ? (t+n+" "+fn(t,n+1,i)) : ""; }
// use it to get a selector for all elements matching the resulting pattern
$(fn("#audio_player",1,12)).mediaelementplayer({ ... });