Closed Probablybest closed 4 years ago
I have multiple flickity carousel's on one page which have full screen enabled. What I'm trying to do is detect when the div.gallery__slides has the class is-fullscreen and add a class to the parent div .gallery-container of is-fullscreen.
.gallery__slides
is-fullscreen
.gallery-container
Here is a jsFiddle of my code.
You can see where I have tried to add a simple hasClass but this doesn't seem to be working.
//is fullscreen detection if ($(".gallery__slides").hasClass("is-fullscreen")) { $(this).parent().addClass('is-fullscreen'); }
Here is all my JS:
$(document).ready(function(){ $('.gallery-container').each(function(i, container) { var options = { cellSelector: '.gallery__slide', cellAlign : 'center', pageDots : false, prevNextButtons : false, accessibility : false, wrapAround : true, imagesLoaded : true, pauseAutoPlayOnHover: false, fullscreen: true, lazyLoad: 1, autoPlay: 7000 }; var time = 2; var $bar, $slider, isPause, tick, percentTime; $('.gallery__slides').flickity(options); var $container = $(container); var $slider = $container.find('.gallery__slides'); var flkty = $slider.data('flickity'); var selectedIndex = flkty.selectedIndex; var slideCount = flkty.slides.length; var $pagers = $container.find('.gallery__page-dots'); for (i = 0; i < slideCount; i++) { $pagers.append('<li class="gallery__page-dot-item"></li>'); } var $pager = $pagers.find('li'); var $caption = $container.find('.gallery__caption .image-caption'); $slider.on( 'select.flickity', function() { // set image caption using img's alt $caption.text( flkty.selectedElement.children[0].alt ); $pager.filter('.is-selected').removeClass('is-selected'); $pager.eq(flkty.selectedIndex).addClass('is-selected'); }); $pagers.on( 'click', 'li', function() { var index = $(this).index(); $slider.flickity( 'select', index ); }); // previous var $prev = $container.find('.prev'); $prev.on( 'click', function() { $slider.flickity('previous'); }); // next var $next = $container.find('.next'); $next.on( 'click', function() { $slider.flickity('next'); }); //is fullscreen detection if ($(".gallery__slides").hasClass("is-fullscreen")) { $(this).parent().addClass('is-fullscreen'); } }); });
I have multiple flickity carousel's on one page which have full screen enabled. What I'm trying to do is detect when the div
.gallery__slides
has the classis-fullscreen
and add a class to the parent div.gallery-container
ofis-fullscreen
.Here is a jsFiddle of my code.
You can see where I have tried to add a simple hasClass but this doesn't seem to be working.
Here is all my JS: