Can I slow down the speed of the featured slides?
I'm trying to slow down the speed of the slideshow. I'm looking in the stylesheet under #slides .features_pagination but none of the code there seems to have anything to do with the speed of the slideshow. I made some pics with text and people want more time to read them. Thanks
Official response from Jesse HaffYou can change the speed of the slider by first adding the following javascript to your layout.html file, somewhere just below the tag, and then modifying the play speed. 4000 would be 1 second shorter, 6000 would be 1 second longer.
<script>
$(document).ready(function(){
$("#slides_custom").slides({
preload: true,
generatePagination: false,
play: 5000,
effect: 'fade',
fadeSpeed: 700,
crossfade: true,
pagination: true,
paginationClass: 'features_pagination'});
});
</script>Next, edit the Featured content sliders template and change
<div id="slides">
to
<div id="slides_custom">
Finally, add the following to the bottom of your theme.scss file:
#slides_custom {
overflow: hidden;
#features_headline {
position: absolute;
bottom: 0px;
background: #333;
width: 100%;
font-size: 20px;
color: #fff;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
a {
padding: 15px;
display: block;
color: #fff; } }
.features_pagination {
height: 40px;
ul {
line-height: 40px;
margin: 0px;
padding: 0px; }
ul li {
float: left;
display: block;
color: black;
display: inline;
background-color: $theme_color_4;
margin-right: 5px;
@include border-radius-bottom-left(6px);
@include border-radius-bottom-right(6px);
padding: 0 15px;
&:hover {
background-color: darken($theme_color_4, 10); }
a {
color: black;
&:hover {
text-decoration: none; } } }
ul li.current a {
display: block;
color: black; }
.current {
background-color: darken($theme_color_4, 10);
color: black; } } }
But, thanks again.
