Some Way,
Хорошо план Б.
Код не претендует на красивое решение, но зато вроде работает отлично - никаких проблем ни с анимцией ни с чем-то еще. Его можно улучшить, если все ок.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
<style>.owl-item{background-color: #c0bdbd;}</style>
</head>
<body>
<div id="avatar-carousel" class="owl-carousel">
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 70</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 90</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 230</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 210</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 270</h6>
<p> </p>
</div>
</div>
</div>
</div>
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
var arr = [];
var iFrom = 50;
var iTo = 500;
/* формируется массив с товарами */
window.onload = function(){
var p = document.querySelectorAll('.wpb_wrapper p');
var h5 = document.querySelectorAll('.wpb_wrapper h5');
var h6 = document.querySelectorAll('.wpb_wrapper h6');
for(var i = 0; i < p.length; i++){
var temp = {};
if(i%2 == 0){
temp.p = p[i].innerHTML;
}else{
temp.p = p[i+1].innerHTML;
}
temp.h5 = h5[i].innerHTML;
temp.h6 = h6[i].innerHTML.replace('EUR ', '');
arr[arr.length] = temp;
}
}
/* отбор товаров, соответствующих критериям */
function sort(from, to) {
var from = from;
var to = to;
var good = [];
for(var i = 0; i < arr.length; i++){
var x = arr[i]['h6'];
if(x >= from && x <= to){
good[good.length] = arr[i];
}
}
add(good);
}
// добаавление товаров в карусель
function add(good) {
var good = good;
for(var i = 0; i < good.length; i++){
$('#avatar-carousel').trigger('add.owl.carousel', [
'<div class="owl-item"><div class="wpb_text_column"><div class="wpb_wrapper">' +
'<p>' + good[i]['p'] + '</p>' +
'<h5>' + good[i]['h5'] + '</h5>' +
'<h6> EUR ' + good[i]['h6'] + '</h6>' +
'<p> </p></div></div></div>'
]).trigger('refresh.owl.carousel');
}
};
// удаление товаров из карусели
function del() {
var el = document.querySelectorAll('.wpb_wrapper');
for(var i = 0; i < el.length; i++){
$('#avatar-carousel').trigger('remove.owl.carousel',i).trigger('refresh.owl.carousel');
}
}
/* Инициализация карусели */
$('#avatar-carousel').owlCarousel({
loop:true,
lazyLoad:true,
margin:10,
dots: false,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
var globalTimeout = null;
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 50,
to: 500,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
if (globalTimeout != null) {
clearTimeout(globalTimeout);
}
globalTimeout = setTimeout(function() {
globalTimeout = null;
del();
sort(from, to);
}, 2000);
});
});
</script>
</body>
</html>