Skip to content

Instantly share code, notes, and snippets.

@kolyasademetrio

kolyasademetrio/flexslider.html

Last active September 16, 2016 07:51
Show Gist options
  • Save kolyasademetrio/2561b9c23407d769ba97524df7b8beaf to your computer and use it in GitHub Desktop.
Save kolyasademetrio/2561b9c23407d769ba97524df7b8beaf to your computer and use it in GitHub Desktop.
Download ZIP
HTML: template of flexslider
Raw
flexslider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- slider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css"/>
<!-- fonts css -->
<link rel="stylesheet" href="css/fonts.css">
<!-- custom css -->
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 wrapper__item">
<div class="flexslider">
<ul class="slides">
<li class="flexslider__item">
<a href="http://placehold.it/100x300" class="flexslider__link">
<img src="http://placehold.it/100x100" alt="" class="flexslider__img">
</a>
</li>
<li class="flexslider__item">
<a href="http://placehold.it/100x300" class="flexslider__link">
<img src="http://placehold.it/100x100" alt="" class="flexslider__img">
</a>
</li>
<li class="flexslider__item">
<a href="http://placehold.it/100x300" class="flexslider__link">
<img src="http://placehold.it/100x100" alt="" class="flexslider__img">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.3.min.js"></script>
<!-- slider JS -->
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<!-- custom js -->
<script type="text/javascript" src="js/script.js"></script>
<!-- flexslider initialize -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
prevText: "prev",
nextText: "next",
pausePlay: true,
itemWidth: 200,
itemMargin: 5,
minItems: 1,
maxItems: 1,
controlsContainer: $('.flexslider'),
smoothHeight: true,
startAt: 0,
slideshow: true,
slideshowSpeed: 2000,
pauseOnAction: true
});
});
</script>
<!-- popup initialize -->
<script type="text/javascript">
$(document).ready(function() {
// $('.header__orderButton').magnificPopup({
// type:'inline',
// removalDelay: 500,
// mainClass: 'mfp-fade popup_inline',
// showCloseBtn: true,
// closeMarkup: '<div class="mfp-close">x</div>',
// closeBtnInside: true,
// closeOnContentClick: false,
// closeOnBgClick: true,
// alignTop: false,
// fixedContentPos: true
// });
// $('.link').magnificPopup({
// type: 'image',
// removalDelay: 500,
// mainClass: 'mfp-fade popup_image',
// showCloseBtn: true,
// closeMarkup: '<div class="mfp-close">x</div>',
// closeBtnInside: true,
// closeOnContentClick: false,
// closeOnBgClick: true,
// alignTop: false,
// fixedContentPos: true,
// gallery: {
// enabled: true
// }
// });
// $('.wrapper').each(function() {
// $(this).magnificPopup({
// delegate: '.link',
// type: 'image',
// removalDelay: 500,
// mainClass: 'mfp-fade popup_image',
// showCloseBtn: true,
// closeMarkup: '<div class="mfp-close">x</div>',
// closeBtnInside: true,
// closeOnContentClick: false,
// closeOnBgClick: true,
// alignTop: false,
// fixedContentPos: true,
// gallery: {
// enabled:true
// }
// });
// });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment