I'm looking to update a site for some friends with a pretty simple request (to change the time on each slide from ~5 sec -> 15 sec) but can't find the parameters where I'd be able to change the length of time. I'm not by any means an expert, but the site was built by someone who is no longer on board and we just want to fix this element... Any help you can offer would be appreciated --
Here is the CSS related to the slideshow:
.slideshow{
position:relative;
background:#000;
}
.slideshow img,
.slidegallery img{
display:block;
width:100%;
height:auto;
}
.slideshow .slide {
width:100%;
position:absolute;
z-index:1;
left:0;
top:0;
}
.slideshow .slide.active { z-index:2; }
.pagination {
position:absolute;
bottom:28px;
left:0;
width:100%;
z-index:100;
text-align:center;
}
.pagination ul {
margin:0;
padding:0;
overflow:hidden;
line-height:0;
}
.pagination ul li {
margin:0 5px;
display:inline-block;
vertical-align:top;
list-style:none;
}
.pagination a {
width:13px;
height:13px;
text-indent:-9999px;
display:block;
border-radius:50%;
background:#fff;
overflow:hidden;
}
.pagination a:hover, .pagination li.active a { background:#ffcf00; }
.home .caption-holder{
max-width:1250px;
margin:0 auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
.slideshow .caption{
font-size:14px;
line-height:29px;
background:rgba(0,0,0,0.7);
color:#fff;
position:absolute;
left:40px;
bottom:118px;
padding:0 32px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.slideshow p { margin:0; }
.slideshow h2 {
margin:0 0 6px;
font-size:31px;
line-height:35px;
font-weight:300;
color:#ffca00;
letter-spacing:-1px;
}
.home .slideshow .slide .caption{
width:491px;
font-size:12px;
line-height:14px;
}
.slideshow .holder {
padding:3.2% 6.5% 4.3%;
line-height:18px;
overflow:hidden;
}
.slideshow .btn-next,
.slideshow .btn-prev {
width:32px;
height:100%;
position:absolute;
right:0;
top:0;
text-indent:-9999px;
background:#fc0;
overflow:hidden;
}
.slideshow .btn-prev {
right:auto;
left:0;
}
.slideshow .btn-next:after,
.slideshow .btn-prev:after{
width:10px;
height:18px;
position:absolute;
content:'';
top:50%;
right:50%;
margin:-9px -5px 0 0;
background:url(images/social-networks.png) no-repeat -219px 0;
}
.slideshow .btn-prev:after { background-position:-198px 0; }
.slideshow .slide.second .caption, .slideshow .slide.third .caption, .slideshow .slide.fourth .caption {padding:3px 5px 3px 19px;}
.slideshow .slide.fourth .caption {
width:727px;
text-indent:7px;
padding:0;
}
.slideshow .slide.fourth .next-btn, .slideshow .slide.fourth .prev-btn{height:30px;}
.slideshow .slide.fifth .caption{
background:none;
}
Run code snippetExpand snippet
and the .php from the template that populates the slideshow:
<?php if ($projects = get_field('home_gallery')): ?>
<?php global $post; ?>
<?php foreach($projects as $slide): ?>
<?php echo get_theme_image($slide['image'],'full',array(),true) ?>
<?php $post = $slide['project']; ?>
<?php setup_postdata($post); ?>
<?php wp_reset_postdata(); ?>
<?php endforeach; ?>
<?php endif; ?>
Run code snippetExpand snippet
Here is the JS I could find that seems relevant -- tried changing the switchtime and animspeed but doesnt seem to be making a difference...
/*
* jQuery SlideShow plugin
*/
;(function($){
function FadeGallery(options) {
this.options = $.extend({
slides: 'ul.slideset > li',
activeClass:'active',
disabledClass:'disabled',
btnPrev: 'a.btn-prev',
btnNext: 'a.btn-next',
generatePagination: false,
pagerList: '
',
pagerListItem: '
