実現させたいこと
動画をスライドで表示させ、2枚目のスライドから始まり、左右にスライドできる画面を実装しています。
できないこと
スライドさせる要素が全体的に左寄りになっていてます。原因がわかりません。
ご教授お願いいたします。
ソース
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick.css" media="screen" /> 8 <link rel="stylesheet" type="text/css" href="reset.css" media="screen" /> 9 <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick-theme.css" media="screen" /> 10 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 11 <script src="./slick-1.8.1/slick/slick.min.js"></script> 12</head> 13 14<body> 15 <div class="slider"> 16 17 <div id="video_01"></div> 18 <div id="video_02"></div> 19 <div id="video_03"></div> 20 </div> 21 22</body> 23<style> 24 *, 25 *:before, 26 *:after { 27 -webkit-box-sizing: border-box; 28 -moz-box-sizing: border-box; 29 -o-box-sizing: border-box; 30 -ms-box-sizing: border-box; 31 box-sizing: border-box; 32 } 33 34 .slider { 35 border: solid 1px #000; 36 width: 1400px; 37 height: 420px; 38 padding: 0; 39 } 40 41 #video_01, 42 #video_02, 43 #video_03 { 44 display: inline-block; 45 border: solid 1px red; 46 /* 47 margin: 0 40px;*/ 48 width: 800px !important; 49 height: 420px !important; 50 } 51 52 .slick-next { 53 right: 370px; 54 z-index: 99; 55 } 56 57 .slick-prev { 58 left: 140px; 59 z-index: 100; 60 } 61 62 /* 63 .slick-track { 64 width: 1500px !important; 65 }*/ 66 67</style> 68 69<script> 70 $(function() { 71 $('.slider').slick({ 72 infinite: false, 73 initialSlide: 1, 74 dots: false, 75 slidesToshow: true, 76 cssEase: 'ease-in-out', 77 centerMode: true, 78 centerPadding: '220px', 79 slidesToshow: 1, 80 }) 81 }) 82 83 84 85 86 // Load the IFrame Player API code asynchronously. 87 var tag = document.createElement('script'); 88 tag.src = "https://www.youtube.com/player_api"; 89 var firstScriptTag = document.getElementsByTagName('script')[0]; 90 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 91 92 var ytplayer = [] 93 94 var ytData = [{ 95 id: 'b4YLo74OWfY', 96 area: 'video_01' 97 }, { 98 id: 'IGInsosP0Ac', 99 area: 'video_02' 100 }, { 101 id: 'bFHcgBfZEq0', 102 area: 'video_03' 103 }] 104 105 function onYouTubePlayerAPIReady() { 106 107 var ytHeight = 600, 108 ytWidth = 300 109 110 for (let i = 0; i < ytData.length; i++) { 111 ytplayer[i] = new YT.Player(ytData[i]['area'], { 112 width: 'ytWidth', 113 height: 'ytHeight', 114 videoId: ytData[i]['id'], 115 playerVars: { 116 rel: 0, 117 autoplay: 0, 118 showinfo: 0 119 }, 120 }); 121 } 122 } 123 124</script> 125 126</html>
回答1件
あなたの回答
tips
プレビュー