1

I'm using swipejs (https://github.com/bradbirdsall/Swipe) and want to add a class to certain DOM elements if the slide being slided to has a data attribute.

In this case a slide may have the attribute of data-colour="orange". When sliding to that slide I want to addClass '.orange' to any DOM element that hasClass '.colour'

HTML:

<!-- Slide 1 -->
<div class="slide" data-colour="orange">
<h1 class="center">we know sport</h1>
</div>

<!-- Slide 2 -->
<div class="slide" data-colour="blue">
<h1 class="center">we really know football</h1>
</div>

jQuery:

$(document).ready(function(){ 
    var elem = document.getElementById('mySwipe');
        window.mySwipe = Swipe(elem, {
            callback: function(){   
                      colour.addClass($('.slide').data('colour'));  
            }
    });
});

This performs the desired action, but will only apply the data attribute of the current slide when sliding to the next slide, whereas I would like to work out the data attribute of the next slide, and when sliding to it add that as a class to other DOM elements.

Any help would be greatly appreciated.

1 Answers1

0

Swipe 2.0 adds attribute data-index, so you could write:

$('#mySwipe [data-index='+(mySwipe.getPos()+1)+']').data('colour')

greenmarker
  • 1,599
  • 1
  • 21
  • 29