Skip to content

Instantly share code, notes, and snippets.

@danmaina

danmaina/index.html

Created June 13, 2017 09:08
Show Gist options
  • Save danmaina/244cb32674d1f66f5973656b389369c7 to your computer and use it in GitHub Desktop.
Save danmaina/244cb32674d1f66f5973656b389369c7 to your computer and use it in GitHub Desktop.
Download ZIP
Content Slider
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Content Slider</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1 class="page-title">Content Slider</h1>
<div class="container">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image0.jpg" alt="Image 0">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image1.jpg" alt="Image 1">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image2.jpg" alt="Image 2">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image3.jpg" alt="Image 3">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image4.jpg" alt="Image 4">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Six</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src="img/Image5.png" alt="Image 5">
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Raw
main,js
$(document).ready(function(){
//Set Options
var speed = 500;
var autoswitch = true;
var autoswitch_speed = 6000;
// Add Initial Active class
$(".slide").first().addClass('active');
//Hide All Slides
$('.slide').hide();
// Show first slide
$('.active').show();
if(autoswitch == true){
setInterval(function(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
}else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}, autoswitch_speed);
}
});
Raw
main.css
/*Tags*/
html{
background-color: #151515;
color: #4286f4;
}
body{
margin: 10px auto;
padding: 10px;
}
/*Classes*/
.page-title{
text-align: center;
margin: 15px auto;
padding: 10px;
border-bottom: solid 3px #4286f4;
}
.slide{
position: absolute;
}
.slide-copy{
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: #9e42f4;
background: rgba(0, 0, 0, 0.5);
}
/*Ids*/
#container{
width: 80%;
margin: 40px auto;
overflow: hidden;
}
#slider{
padding: 15px;
width: 100%;
height: 80vh;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: solid 2px #4286f4;
border-radius: 5px;
}
#slider img{
width: 100%;
}
@danmaina
Copy link
Author

Dependent on jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment