Slider Customization

Hi,

I've been playing around with Sleek Photo here: http://sagerock.com/2/

It's very cool.

However, I don't seem to be able to change any of the parameters such as speed, making the buttons clickable, etc.

I've been trying to modify this file:
sleekphoto\library\scripts\loopedslider.js

But is it possible that it is this file:
sleekphoto\library\scripts\loopedslider.min.js

Or could it be in here:
sleekphoto\library\components\feature-slider.php

There are 3 things I would like it to do:
1. Slow down.
2. Make the round buttons clickable.
3. Stop once it gets to the end of the set.

Any help on this would be awesome!

Thank you,
Sage

  • Arnold
    • El Macho WP

    I don't know that particular slider, but in general the loopedslider.js and loopedslider.min.js are the same thing. The min version is "minified" so it will load faster and this what the slider actually uses. It's also unreadable. If you swap the names you can run the readable version and see what controls you have.

  • Han
    • The Crimson Coder

    1. Slow down.
    > modify loopedslider.js line 243 - 244
    2. Make the round buttons clickable.
    > I don't see the round buttons
    3. Stop once it gets to the end of the set.
    > There is no setting for this and might requires customization

  • sagerock
    • WPMU DEV Initiate

    Hi all,

    I'm figuring some things out.

    I first figured out how to make the buttons underneath the images hyperlinks. That's in layout.css

    I changed this line:
    ul.pagination li a { opacity: 0; display: none;}

    To this:
    ul.pagination li a { opacity: 0; }

    I then learned that I could add a previous and next button. I did that by modifying "feature-slider.php".

    I added these first two lines:
    previous
    next
    <ul class="pagination">

  • 1
  • 2
  • 3
  • 4
  • I've been playing with these numbers in \loopedslider.js:

    autoStart: 50000, //Set to positive number for true. This number will be the time between transitions.
    restart: 2000, //Set to positive number for true. Sets time until autoStart is restarted.
    slidespeed: 100, //Speed of slide animation, 1000 = 1second.
    fadespeed: 5000, //Speed of fade animation, 1000 = 1second.
    autoHeight: 10000, //Set to positive number for true. This number will be the speed of the animation.
    addPagination: false //Add pagination links based on content? true/false

    The only number that seems to have an effect is "Slidespeed". I currently have it set to 100 and the slides transition super fast.

    It would be super awesome if this template used the newer version of LoopedSlider here:
    http://slidesjs.com/

    I have a feeling that would give us more customization.

    But all in all, it's working pretty well.

    Thanks again,
    Sage

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.