CakePHPでjavascriptのライブラリslider-pro-masterを使っているのですが、どうしても表示が上手くいきません。
使い方のサンプルがのっているサイト
上のページの横幅いっぱいスライダーの設定を用いているのですが、画像が横に並ばずに縦のままなのです。
下にCakePHPのlayout.ctpファイルのコードを載せておきます。
画像ファイルの大きさは900×250で、webroot>imgファイルの中に置いてあります。
ただのhtmlで記述したときには問題ありませんでした。
何が原因なのでしょうか?よろしくお願いします。
PHP
1<!DOCTYPE html> 2<html> 3<head> 4 5 <?php 6 7 echo $this->Html->script('jquery-1.11.3.min'); 8 echo $this->Html->script('ConnectedSelect'); 9 echo $this->Html->script('slider-pro-master/dist/js/jquery.sliderPro.min.js'); 10 11 echo $this->Html->css('slider-pro-master/dist/css/slider-pro.min.css'); 12 echo $this->fetch('meta'); 13 echo $this->fetch('css'); 14 echo $this->fetch('script'); 15 ?> 16 <script> 17 $(document).ready(function() { 18 $('#wide').sliderPro({ 19 width: 900,//横幅 20 arrows: true,//左右の矢印 21 buttons: false,//ナビゲーションボタンを出す 22 slideDistance:30,//スライド同士の距離 23 visibleSize: '100%',//前後のスライドを表示 24 }); 25 }); 26 </script> 27</head> 28<body> 29 <div id="container"> 30 31 <div id="wide" class="slider-pro"> 32 <div class="sp-slides"> 33 <figure class="sp-slide"> 34 <?php echo $this->Html->image('topimage.jpg', array('class' => "sp-image", 'width' => '900px'));?> 35 </figure> 36 <figure class="sp-slide"> 37 <?php echo $this->Html->image('ginkakuji.jpg', array('class' => "sp-image", 'width' => '900px'));?> 38 </figure> 39 <figure class="sp-slide"> 40 <?php echo $this->Html->image('togetsukyo.jpg', array('class' => "sp-image", 'width' => '900px'));?> 41 </figure> 42 43 </div> 44 </div> 45</body> 46</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/12 09:54