Some Way,
не могу догадаться, почему сбоит Easy Modal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://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;} img{width: 50px;}</style>
</head>
<body>
<div id="avatar-carousel" class="owl-carousel">
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 100</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 120</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 180</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 250</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 350</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 450</span></h6>
</div>
</div>
</div>
</div>
<div style="position: relative; padding: 50px 300px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
// тут будут храниться распарсенные товары
var arr = [];
/* формируется массив с товарами */
window.onload = function(){
var p = $('.wpb_wrapper p');
var h5 = $('.wpb_wrapper h5');
var h6 = $('.wpb_wrapper h6 span');
for(var i = 0; i < p.length; i++){
var temp = {};
if(i%2 == 0){
temp.img = p[i].innerHTML;
temp.p = p[i+1].innerHTML;
}else{
temp.img = p[i+1].innerHTML;
temp.p = p[i].innerHTML;
}
temp.h5 = h5[i].innerHTML;
temp.h6 = h6[i].innerHTML.replace('EUR ', '');
arr[arr.length] = temp;
console.log(arr);
}
}
/* отбор товаров, соответствующих критериям */
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 active center"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">' +
'<p>' + good[i]['img'] + '</p>' +
'<p>' + good[i]['p'] +'</p>' +
'<h5>' + good[i]['h5'] + '</h5>' +
'<h6><span>EUR ' + good[i]['h6'] + '</span></h6>' +
'</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,
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");
// задержка после задания диапазона 1,5 секунды
if (globalTimeout != null) {
clearTimeout(globalTimeout);
}
globalTimeout = setTimeout(function() {
globalTimeout = null;
del();
sort(from, to);
}, 1500);
});
});
</script>
</body>
</html>