Last active
October 25, 2019 12:42
-
-
Save Spellhammer/a13d209d763d9ce1d48dca7d1a6ae24a to your computer and use it in GitHub Desktop.
Custom JavaScript "slider" with movable HTML element (similar to Trello.com home page slider) for Oxygen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready( function() { | |
var sliderpos = 1; | |
sliderEngine( sliderpos ); | |
jQuery('.advance-slider').click( function() { | |
sliderpos += 1; | |
sliderEngine( sliderpos ); | |
}) | |
jQuery('.retreat-slider').click( function() { | |
sliderpos -=1; | |
sliderEngine( sliderpos ); | |
}) | |
function sliderEngine( position ) { | |
jQuery('.slider-dot:nth-child(' + position + ')').css('background-color', 'black'); | |
jQuery('.slider-dot:not(:nth-child(' + position + '))').css('background-color', 'white'); | |
switch( position ) { | |
case 0: | |
sliderpos = 4; | |
sliderEngine( sliderpos ); | |
break; | |
case 1: | |
jQuery('.slider-movable-div').css('left', '90%'); | |
jQuery('.slider-movable-div').css('top', '25%'); | |
jQuery('.slider-movable-div').css('transform', 'rotate(10deg)'); | |
jQuery('.slider-body').css('background-image','url(/wp-content/uploads/2019/10/backpack-blond-hair-blurred-background-2519212.jpg)'); | |
jQuery('.slide-title').html('Look at that thing in the distance!'); | |
break; | |
case 2: | |
jQuery('.slider-movable-div').css('left', '50%'); | |
jQuery('.slider-movable-div').css('top', '90%'); | |
jQuery('.slider-movable-div').css('transform', 'rotate(-15deg)'); | |
jQuery('.slider-body').css('background-image','url(/wp-content/uploads/2019/10/body-of-water-nature-ocean-2439625.jpg)'); | |
jQuery('.slide-title').html('Hide'); | |
break; | |
case 3: | |
jQuery('.slider-movable-div').css('left', '75%'); | |
jQuery('.slider-movable-div').css('top', '0%'); | |
jQuery('.slider-movable-div').css('transform', 'rotate(30deg)'); | |
jQuery('.slider-body').css('background-image','url(/wp-content/uploads/2019/10/ball-shaped-blur-bubble-2106442-1.jpg)'); | |
jQuery('.slide-title').html('Pop the bubble!'); | |
break; | |
case 4: | |
jQuery('.slider-movable-div').css('left', '10%'); | |
jQuery('.slider-movable-div').css('top', '30%'); | |
jQuery('.slider-movable-div').css('transform', 'rotate(-45deg)'); | |
jQuery('.slider-body').css('background-image','url(/wp-content/uploads/2019/10/adult-animal-attractive-2090704.jpg)'); | |
jQuery('.slide-title').html('Pet the horse!'); | |
break; | |
case 5: | |
sliderpos = 1; | |
sliderEngine( sliderpos ); | |
break; | |
} | |
} | |
jQuery('.slider-dot').click( function() { | |
var dotindex = jQuery(this).index() + 1; | |
sliderpos = dotindex; | |
sliderEngine( dotindex ); | |
}) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment