Skip to content

Instantly share code, notes, and snippets.

@khoailang99

khoailang99/index.html

Created December 27, 2019 04:50
Show Gist options
  • Save khoailang99/dec420080e2aada87bbec31a14e0641e to your computer and use it in GitHub Desktop.
Save khoailang99/dec420080e2aada87bbec31a14e0641e to your computer and use it in GitHub Desktop.
Download ZIP
Carousel
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="carousel.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="carousel-container">
<a class="slick-arrow slick-prev">
<i class="fas fa-angle-left"></i>
</a>
<div class="slick-list">
<div class="slick-track">
<div id="lastClone" class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img6.jpg" alt="">
</a>
</div>
</div>
<div class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img2.jpeg" alt="">
</a>
</div>
</div>
<div class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img3.jpg" alt="">
</a>
</div>
</div>
<div class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img4.jpg" alt="">
</a>
</div>
</div>
<div class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img5.jpg" alt="">
</a>
</div>
</div>
<div class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img6.jpg" alt="">
</a>
</div>
</div>
<div id="firstClone" class="slick-slide slick-cloned" data-index="1" tabindex="-1" aria-hidden="true" style="width: 584px;">
<div>
<a href="" aria-label="" tabindex="-1" style="width: 100%; display: inline-block">
<img class="image" src="img/img2.jpeg" alt="">
</a>
</div>
</div>
</div>
</div>
<a class="slick-arrow slick-next">
<i class="fas fa-angle-right"></i>
</a>
<ul class="slick-dots">
<li class="slick-active">
<button>1</button>
</li>
<li class="">
<button>2</button>
</li>
<li class="">
<button>3</button>
</li>
<li class="">
<button>4</button>
</li>
<li class="">
<button>5</button>
</li>
</ul>
</div>
<script src="carousel.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment