I have a simple video slider with next/previous button. As it turns out the individual bullets navigation for each video-slide is also needed.
我有一个带有next/previous按钮的简单视频滑块。因为每个视频幻灯片都需要单独的子弹导航。
Which brings me here for a greeting with y'all.
这使我来到这里与大家打招呼。
Here is my pathetic effort to show what I did:-
这是我可怜的努力来展示我所做的:-
HTML
<div class="container row full-content" style="position: relative !important; top: -180px !important;">
<div class="right-side full-content col-xs-3 down">
<div class="slide-box">
<div class="example1" id="start1">
<video id="video1" class="example1" width="240" height="134" controls autoplay true>
<source src="./files/videos/video-1.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div>
<span class="presented">Presented by: </span>
<a href="#" class="presenter black">First Presenter</a>
<span class="slide-count">Slide <strong>1 of 6</strong></span>
</div>
<div class="example1">
<video class="example1" width="240" height="134" controls false>
<source src="./files/videos/video-3.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presentation 2</a>
<span class="slide-count">Slide <strong>2 of 6</strong></span>
</div>
<div class="example1">
<video class="example1" width="240" height="134" controls false>
<source src="./files/videos/presenter-4.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
<span class="slide-count">Slide <strong>3 of 6</strong></span>
</div>
<div class="example1">
<video class="example1" width="240" height="134" controls false>
<source src="./files/videos/presenter-5.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
<span class="slide-count">Slide <strong>4 of 6</strong></span>
</div>
<div class="example1">
<video class="example1" width="240" height="134" controls false>
<source src="./files/videos/presenter-6.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
<span class="slide-count">Slide <strong>5 of 6</strong></span>
</div>
<div class="example1">
<video class="example1" width="240" height="134" controls false>
<source src="./files/videos/presenter-7.mp4" type="video/mp4">
</video>
<div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
<span class="slide-count">Slide <strong>6 of 6</strong></span>
</div>
<br/>
<ul class="pagination vertical" style="position: relative; top: -30px;">
<a href="#" class="back">
<li class="float-left"><img src="./images/previous-button.png"/></li>
</a> <a href="#" class="forward">
<li class="float-right"><img src="./images/next-button.png"/></li>
</a>
</ul>
</div>
<a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal">Select presentation slide</a>
<a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal2">View presentation menu</a>
</div>
</div>
JQuery
$(document).ready(function(e) {
var $curr = $( "#start" );
var slide_index = 1;
var max_slides = $("div.slide-image").children("div.example").length;
/* Video Navigation JS */
var $curr1 = $( "#start1" );
$curr1.css( "height" , "" );
var video_index = 1;
var max_videos = $("div.slide-box").children("div.example1").length;
next_img = './sites/all/themes/basic/images/next-button.png';
ds_next_img = './sites/all/themes/basic/images/disabled-next.png';
previous_img = './sites/all/themes/basic/images/previous-button.png';
ds_previous_img = './sites/all/themes/basic/images/disabled-previous.png';
$('li.float-left img').attr("src", ds_previous_img);
//alert(max_videos);
$( ".back" ).click(function() {
if (video_index - 1 < 1) {
$('li.float-left img').attr("src", ds_previous_img);
return;
}
$('li.float-right img').attr("src", next_img);
$curr1.children('video.example1').get(0).pause();
$curr1 = $curr1.prev();
video_index --;
if (video_index - 1 < 1) {
$('li.float-left img').attr("src", ds_previous_img);
}
var styles = {
display: "block"
};
var default_styles = {
display: "none"
};
$( "div.example1" ).css( default_styles );
$curr1.css( styles );
$curr1.children('video.example1').get(0).play();
});
$( ".forward" ).click(function() {
if (video_index +1 > max_videos) {
$('li.float-right img').attr("src", ds_next_img);
return;
}
$('li.float-left img').attr("src", previous_img);
$curr1.children('video.example1').get(0).pause();
$curr1 = $curr1.next();
video_index ++;
if (video_index +1 > max_videos) {
$('li.float-right img').attr("src", ds_next_img);
}
var styles = {
display: "block"
};
var default_styles = {
display: "none"
};
$( "div.example1" ).css( default_styles );
$curr1.css( styles );
//$curr1.children('video').play();
$curr1.children('video.example1').get(0).play();
//$curr1.children('video').attr({'autoplay':'true'});
});
});
1 个解决方案
#1
0
This is how I did it.
我就是这么做的。
在这里输入链接描述
Best.
请接受我最美好的祝愿，
function showSlide(id){ // id is the variable name of what we will be calling which will be passed
stopLoop(); // call function that we have declared above so that the interval is cleared and restarted
if(id > count){
id = 1; // if id = more than the count of images then set back to 1
}else if(id < 1){
id = count; // if id = less than count of list then set back to 4 or whatever number of images
}
$('.quickslider > img').fadeOut(300); // fadeout all images
$('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id
$('.nav-thumbs > a#'+id).addClass('active');
sliderInt = id; // update so that the current slide = 2 as set globally
sliderNext = id + 1; // calculate the next image
startSlider(); // start the slider process again, as it was stopped before
}
#1
0
This is how I did it.
我就是这么做的。
在这里输入链接描述
Best.
请接受我最美好的祝愿，
function showSlide(id){ // id is the variable name of what we will be calling which will be passed
stopLoop(); // call function that we have declared above so that the interval is cleared and restarted
if(id > count){
id = 1; // if id = more than the count of images then set back to 1
}else if(id < 1){
id = count; // if id = less than count of list then set back to 4 or whatever number of images
}
$('.quickslider > img').fadeOut(300); // fadeout all images
$('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id
$('.nav-thumbs > a#'+id).addClass('active');
sliderInt = id; // update so that the current slide = 2 as set globally
sliderNext = id + 1; // calculate the next image
startSlider(); // start the slider process again, as it was stopped before
}