Question

我在网站上使用CCSlider来显示图片。

它们看起来总是很大。我通过使用Foundation使其余的网站响应。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- http://1stwebdesigner.com/responsive-website-tutorial/ -->
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" dir="rtl" lang="ar"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" dir="rtl" lang="ar"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" dir="rtl" lang="ar"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar" class="no-js"> <!--<![endif]-->
<head>
<script type="text/javascript" src="js/modernizr.foundation.js"></script>
<link rel="stylesheet" href="css/foundation.min.css" />
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div id="main" class="row">
  <script src="js/jquery.min.js"></script>
  <script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
<script src="js/jquery.tools.tooltip.min.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/jquery.ccslider-2.0.1.min.js"></script>
<script>
    $(function(){
        $('#demo-nav').find('a').tooltip({effect: 'slide'});
    });

    $(window).load(function(){
        $('#slider').ccslider({
            _3dOptions: {
                imageWidth: 900,
                imageHeight: 350
            }
        });
    });

</script>
<div id="slideshow" class="row">
    <div id="slider" class="twelve columns">
        <img src="gallery/1.jpg" alt="" 
            data-transition='{"effect": "cubeUp", "slices": 9, "animSpeed": 1200, "delay": 100, "delayDir": "fromCentre", "easing": "easeInOutBack", "depthOffset": 300, "sliceGap": 30}' />
        <img src="gallery/2.jpg" alt="" 
            data-transition='{"effect": "cubeRight", "slices": 5, "delay": 200}' />         
    </div>
    <div id="caption" class="cc-caption"><a href="#"></a></div>
</div>
</div> <!-- <div id="main"> at header -->
</body>
</html>

所以几乎所有的代码都是代表性的。只有CCSlider需要像他们一样。我已经看到它的examples但我无法确定它是如何制作的:(

CCSlider响应？

0 个答案: