Last active
March 31, 2016 16:46
-
-
Save darrenjaworski/f034a4bccb82d8f728d9ca96e84e7ea1 to your computer and use it in GitHub Desktop.
web design nightmare (SLIDER IN A SLIDER)
This file contains 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
<html> | |
<head> | |
<title>web design nightmare</title> | |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/> | |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/> | |
<style> | |
body { | |
background: purple; | |
color: white; | |
font-size: 1.5em; | |
} | |
.first-level { | |
max-width: 80%; | |
margin: auto; | |
background: steelblue; | |
} | |
.second-level { | |
max-width: 60%; | |
margin: auto; | |
text-align: center; | |
} | |
.second-level .slick-slide { | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: cover; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="first-level"> | |
<div>first level slider (LEFT + RIGHT KEYS) | |
<div class="second-level"> | |
<div style="background-image: url('https://www.fillmurray.com/300/300')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/400/400')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/600/600')">second level slider (DRAG ME)</div> | |
</div> | |
</div> | |
<div>first level slider (LEFT + RIGHT KEYS) | |
<div class="second-level"> | |
<div style="background-image: url('https://www.fillmurray.com/500/500')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/700/700')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/800/800')">second level slider (DRAG ME)</div> | |
</div> | |
</div> | |
<div>first level slider (LEFT + RIGHT KEYS) | |
<div class="second-level"> | |
<div style="background-image: url('https://www.fillmurray.com/300/300')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/500/500')">second level slider (DRAG ME)</div> | |
<div style="background-image: url('https://www.fillmurray.com/700/700')">second level slider (DRAG ME)</div> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function(){ | |
$('.first-level').slick({ | |
draggable: false, | |
speed: 1500, | |
autoplay: true | |
}); | |
$('.second-level').slick({ | |
speed: 200, | |
autoplay: true | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment