Sercan Uzun
Reputation: 3
How to filter (show/hide) Owl Carousel 2 items (images) based on selected variant with javascript
I want to hide or show the images in the owl carousel slide according to the selected variants.
When a variant is selected, I want only images related to that variant to remain in the owl carousel.
When another variant is selected, I want to hide the others and show images of the newly selected variant.
For this, I added data-variant information to the div elements and tried to change them accordingly. But when there is a selection, all images disappear.
This is my owl carousel HTML code.
<div class="thumb-gallery-wrapper">
<div class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark nav-arrows-thin mb-3">
<div data-variant="variant 1"><img alt="" src="" /></div>
<div data-variant="variant 1"><img alt="" src="" /></div>
<div data-variant="variant 2"><img alt="" src="" /></div>
<div data-variant="variant 1"><img alt="" src="" /></div>
<div data-variant="variant 2"><img alt="" src="" /></div>
...
</div>
<div class="thumb-gallery-thumbs owl-carousel owl-theme manual mb-0">
<div class="cur-pointer" data-variant="variant 1"><img alt="" src="" /></div>
<div class="cur-pointer" data-variant="variant 1"><img alt="" src="" /></div>
<div class="cur-pointer" data-variant="variant 2"><img alt="" src="" /></div>
<div class="cur-pointer" data-variant="variant 1"><img alt="" src="" /></div>
<div class="cur-pointer" data-variant="variant 2"><img alt="" src="" /></div>
...
</div>
</div>
This is template's owl carousel code:
(function ($) {
'use strict';
theme.fn.intObs('.thumb-gallery-wrapper', function () {
var $thumbGalleryDetail = $(this).find('.thumb-gallery-detail'),
$thumbGalleryThumbs = $(this).find('.thumb-gallery-thumbs'),
flag = false,
duration = 300;
$thumbGalleryDetail
.owlCarousel({
items: 1,
margin: 10,
nav: true,
dots: false,
loop: false,
autoHeight: true,
navText: [],
rtl: ($('html').attr('dir') == 'rtl') ? true : false
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$thumbGalleryThumbs.trigger('to.owl.carousel', [e.item.index - 1, duration, true]);
$thumbGalleryThumbs.find('.owl-item').removeClass('selected');
$thumbGalleryThumbs.find('.owl-item').eq(e.item.index).addClass('selected');
flag = false;
}
});
$thumbGalleryThumbs
.owlCarousel({
margin: 15,
items: $(this).data('thumbs-items') ? $(this).data('thumbs-items') : 4,
nav: false,
center: $(this).data('thumbs-center') ? true : false,
dots: false,
rtl: ($('html').attr('dir') == 'rtl') ? true : false
})
.on('click', '.owl-item', function () {
$thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$thumbGalleryDetail.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
$thumbGalleryThumbs.find('.owl-item').eq(0).addClass('selected');
}, {});
}).apply(this, [jQuery]);
My filter function below, triggered by button or selection, hides the entire gallery.
var variantToShow = 'variant 1';
$('.thumb-gallery-wrapper').each(function () {
var $thumbGalleryDetail = $(this).find('.thumb-gallery-detail'),
$thumbGalleryThumbs = $(this).find('.thumb-gallery-thumbs');
$thumbGalleryDetail.find('div:not([data-variant="' + variantToShow + '"])').parent().hide();
$thumbGalleryDetail.find('div[data-variant="' + variantToShow + '"]').parent().show();
$thumbGalleryDetail.trigger('refresh.owl.carousel');
$thumbGalleryThumbs.find('div:not([data-variant="' + variantToShow + '"])').parent().hide();
$thumbGalleryThumbs.find('div[data-variant="' + variantToShow + '"]').parent().show();
$thumbGalleryThumbs.trigger('refresh.owl.carousel');
});
Here is the result:
<div class="thumb-gallery-wrapper">
<div
class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark nav-arrows-thin mb-3 owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 0px; display: none;">
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2766px; display: none;">
<div class="owl-item active" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 1" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: -171.839px -646.317px; width: 451px; height: 253.683px; float: left; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp"); top: 0px; left: 0px; display: none;" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 1" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 451px; height: 253.683px; float: left; display: none; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp");" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 2" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 451px; height: 253.683px; float: left; display: none; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp");" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 1"><img alt="" class="img-fluid ls-is-cached lazyloaded" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 451px; height: 253.683px; float: left; display: none; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp");" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 1"><img alt="" class="img-fluid ls-is-cached lazyloaded" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 451px; height: 253.683px; float: left; display: none; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp");" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 451px; margin-right: 10px; display: none;">
<div data-variant="variant 2" style="display: none;"><img alt="" class="img-fluid lazyload" src="" data-zoom-image="">
<div class="zoomContainer" style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; height: 253.683px; width: 451px; display: none;">
<div class="zoomWindowContainer" style="width: 400px; display: none;">
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 451px; height: 253.683px; float: left; display: none; cursor: grab; background-repeat: no-repeat; position: absolute; background-image: url("https://...webp");" class="zoomWindow"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav" style="display: none;">
<button type="button" role="presentation" aria-label="nav" class="owl-prev disabled"></button>
<button type="button" role="presentation" aria-label="nav" class="owl-next"></button>
</div>
<div class="owl-dots disabled" style="display: none;"></div>
</div>
<div class="thumb-gallery-thumbs owl-carousel owl-theme manual mb-0 owl-loaded owl-drag">
<div class="owl-stage-outer" style="display: none;">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 699px; display: none;">
<div class="owl-item selected active" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 1" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
<div class="owl-item active" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 1" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
<div class="owl-item active" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 2" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
<div class="owl-item active" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 1"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
<div class="owl-item" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 1"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
<div class="owl-item" style="width: 101.5px; margin-right: 15px; display: none;">
<div class="cur-pointer" data-variant="variant 2" style="display: none;"><img alt="" class="img-fluid ls-is-cached lazyloaded" src=""></div>
</div>
</div>
</div>
<div class="owl-nav disabled" style="display: none;">
<button type="button" role="presentation" aria-label="nav" class="owl-prev"><span aria-label="Previous">‹</span></button>
<button type="button" role="presentation" aria-label="nav" class="owl-next"><span aria-label="Next">›</span></button>
</div>
<div class="owl-dots disabled" style="display: none;"></div>
</div>
</div>
Upvotes: 0
Views: 140
Answers (1)
Mike Devenney
Reputation: 1845
Your code, by selecting the parent of any matched div, will hide the entire thumb-gallery-thumbs element which will by extension hides all elements within it. You have an unnecessary call to parent() in this line of code:
$thumbGalleryDetail.find('div:not([data-variant="' + variantToShow + '"])').parent().hide();
I think what you want is this:
$thumbGalleryDetail.find('div:not([data-variant="' + variantToShow + '"])').hide();
Upvotes: 0
Related Questions
- How to determine if a JavaScript array contains an object with an attribute that equals a given value
- How to extend an existing JavaScript array with another array, without creating a new array
- How to filter object array based on attributes?
- How to merge two arrays in JavaScript and de-duplicate items
- How can I change an element's class with JavaScript?
- Cannot display HTML string
- How to loop through a plain JavaScript object with the objects as members
- JavaScript hide/show element
- Owl Carousel 2 - Inline background images not working