読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

FlexSliderで横スライダー

FlexSlider

<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>FlexSliderで横スライダー</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/flexslider.css">
<style>
body { background-color: #42A2CE; }
#container {
  width: 50%;
  margin: 50px auto;
  text-align: center; 
}
h1 { color: #FFF; }
</style>
<script src="js/modernizr.js"></script>
</head>
<body class="loading">
<div id="container" class="cf">
<header>
<h1>FlexSlider</h1>
</header>
<div id="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="img/kitchen_adventurer_cheesecake_brownie.jpg"></li>
<li><img src="img/kitchen_adventurer_lemon.jpg"></li>
<li><img src="img/kitchen_adventurer_donut.jpg"></li>
<li><img src="img/kitchen_adventurer_caramel.jpg"></li>
</ul>
</div>
</section>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.1.1.min">\x3C/script>')</script>
<script src="js/jquery.flexslider.js"></script>
<script>
$(function(){

  $('.flexslider').flexslider({
    animation: 'slide',
    start: function(slider){
      $('body').removeClass('loading');
    }
  });

});
</script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script defer src="js/demo.js"></script>
</body>
</html>