Skip to content

Instantly share code, notes, and snippets.

@darrenjaworski

darrenjaworski/index.html

Last active March 31, 2016 16:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darrenjaworski/f034a4bccb82d8f728d9ca96e84e7ea1 to your computer and use it in GitHub Desktop.
Save darrenjaworski/f034a4bccb82d8f728d9ca96e84e7ea1 to your computer and use it in GitHub Desktop.
Download ZIP
web design nightmare (SLIDER IN A SLIDER)
Raw
index.html
<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