Question

我正在尝试使用此滑块https://github.com/iprodev/iView。我看不到任何文件，但我认为我的方式正确。

这是jsfiddle：http://jsfiddle.net/xibalbian/yevj7/

HTML：

 <div id="iview">

 <!-- Slide 1 -->
 <div data-iview:image="images/big-3.jpg" data-iview:transition="zigzag-top,top-curtain,fade">
 <!-- Video iFrame -->
 <iframe width="100%" height="100%" src="//www.youtube.com/embed/nbP4y7hml98?rel=0" frameborder="0" allowfullscreen></iframe>
 </div>

 <!-- Slide 2 -->
 <div data-iview:image="images/big-3.jpg" data-iview:transition="zigzag-top,top-curtain,fade">
 <!-- Video iFrame -->
 <iframe width="100%" height="100%" src="//www.youtube.com/embed/tqIzoIoHQd0?rel=0" frameborder="0" allowfullscreen></iframe>
 </div>

 </div>

小提琴有所有依赖项（js），我把所有的css文件放在那里。

这是我调用iview的脚本;

$(document).ready(function() {
$('#slider').iView();
});

任何建议将不胜感激！谢谢:)）

Answer 1

正如Arun P Johny提供的解决方案我想回答并关闭这个，

这是工作小提琴：http://jsfiddle.net/arunpjohny/2SkTW/4/

HTML：

<div id="iview290">
<!-- Slide 1 -->
<div data-iview:image="images/big-3.jpg" data-iview:transition="zigzag-top,top-curtain,fade">
    <!-- Video iFrame -->
    <iframe width="100%" height="100%" src="//www.youtube.com/embed/nbP4y7hml98?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Slide 2 -->
<div data-iview:image="images/big-3.jpg" data-iview:transition="zigzag-top,top-curtain,fade">
    <!-- Video iFrame -->
    <iframe width="100%" height="100%" src="//www.youtube.com/embed/tqIzoIoHQd0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

CSS：

#iview290 {
display: block;
width:900px !important;
/* Make sure your images are the same size */
height:400px !important;
/* Make sure your images are the same size */
background: #000;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 5px;
position: relative;
/*-webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);

box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);*/
margin: 40px auto;
}

#iview290 .iviewSlider {
display: block;
width:900px;
/* Make sure your images are the same size */
height:400px;
/* Make sure your images are the same size */
overflow: hidden;
border-radius: 4px;
}

#iview290 .iview-caption {
background: #000000;
}

#iview290 .sl-iview-heading {
font-size:18px !important;
color:#FFFFFF !important;
}

#iview290 .sl-iview-description {
font-size:12px !important;
color:#FFFFFF !important;
}

#iview290 #iview-tooltip {
display: none;
position: absolute;
width: 124px;
height: 100px;
bottom: 30px;
left: -67px;
padding: 10px;
z-index: 100;
}

#iview290 #iview-tooltip div.holder {
display: block;
width: 124px;
height: 84px;
overflow: hidden;
border-radius: 2px;
}

#iview290 #iview-tooltip div.holder div.container {
display: block;
width: 4000px;
}

#iview290 #iview-tooltip div.holder div.container div {
float: left;
display: block;
overflow: hidden;
width: 124px;
height: 84px;
left: -50%;
text-align: center;
}

#iview290 #iview-tooltip div.holder div.container div img {
height: 84px;
margin: 0 auto;
}

JS：

jQuery(document).ready(function () {

jQuery('#iview290').iView({

});

});

jquery图像和视频滑块无法正常工作

1 个答案: