algie powers's activity

Rhonda Lee tagged algie powers' Can I slow down the speed of the featured slides? with Helpful 2012-06-08 10:45:13 -0700

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 Haff

You 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; } } }


algie powers commented on Adding an image to a sidebar 2012-03-30 18:35:12 -0700 · Flag
Brad, thank you so much for your comment. It turns out I was having a brain cramp. When I added the image, I put in the settings of width=“125” height=“100”. But in reality, and my brain refused to SEE this, I had it set at width=“125” border=“100”. The support people pointed it out and I was flabbergasted on how I didn’t notice that. Ha!
But, thanks again.