Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="styles/main.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- </head>
- <body>
- <header>
- <div class="sns">
- <a target="_blank" title="Follow us on Instagram!" href="http://www.instagram.com/koreanadayofficial"><img alt="Follow us on Instagram!" src="images/insta.png" border=0></a>
- <a target="_blank" title="Follow us on Twitter!" href="http://www.twitter.com/adaykorean"><img alt="Follow us on Twitter!" src="images/twitt.png" border=0></a>
- </div>
- </header>
- <header>
- <ul>
- <li><a href="index.html">Let's Learn Korean!</a><li>
- <li style ="float:right" class="dropdown">
- <a href="aboutus.html" class="dropbtn">About Us</a>
- <div class="dropdown-content">
- <a href="contactus.html">Contact Us</a>
- </div>
- </li>
- <li style="float:right"><a href="community.html">Community</a></li>
- <li style="float:right"><a href="resources.html">Resources</a></li>
- </ul>
- </header>
- <div class="container-fluid">
- <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
- <!-- Wrapper for slides -->
- <div class="carousel-inner">
- <div class="item active">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-3"><img src="images/image1.jpg" class="img-responsive"></div>
- <div class="col-md-9">
- <h2>Slide 1</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-3"><img src="images/image2.jpg" class="img-responsive"></div>
- <div class="col-md-9">
- <h2>Slide 2</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-3"><img src="images/image3.jpg" class="img-responsive"></div>
- <div class="col-md-9">
- <h2>Slide 3</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
- </div>
- </div>
- </div>
- </div>
- <!-- End Item -->
- </div>
- <!-- End Carousel Inner -->
- <div class="controls">
- <ul class="nav">
- <li data-target="#custom_carousel" data-slide-to="1" class="active"><a href="#"><img src="images/image1"><small>Slide One</small></a></li>
- <li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="images/image2"><small>Slide Two</small></a></li>
- <li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="images/image3"><small>Slide Three</small></a></li>
- </ul>
- </div>
- </div>
- <!-- End Carousel -->
- </div>
- <script>
- $(document).ready(function(ev){
- $('#custom_carousel').on('slide.bs.carousel', function (evt) {
- $('#custom_carousel .controls li.active').removeClass('active');
- $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
- })
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement