Text Slider

[chrisburton]

I have this reduced case:

Full: http://codepen.io/chrisburton/full/kqgsb Editor: http://codepen.io/chrisburton/pen/kqgsb

The middle column should have a slide functionality while the others (first and third columns) are static content. Each paragraph will be an individual slide if that makes sense.

I’m trying to find a very basic text slider that will slide on click and also have an auto-play feature.

I’ve tried NivoSlider, bxslider, unoSlider and Anything Slider. None worked for me. Any ideas?

[TheDoc]

The <p>s will need to be display block or at the minimum have a wrapper instead. I’m not fully sure what you want this to look like, though!

Should work with any slider out there, though! Can you post an example of you trying out one of the plugins? What goes wrong?

[chrisburton]

Sure. Let me try adding another slider.

@Joe No, not really. Your slider goes up which I think requires jQuery UI. I just need something really simple. I’m going to try creating my own version first, really quick.

I’ll post back.

[chrisburton]

Okay. I updated the Pen with what I’m trying to accomplish. However, this probably won’t work if there are more than two paragraphs.

http://codepen.io/chrisburton/pen/kqgsb

Click the middle column paragraph to see the functionality I’m looking for.

[chrisburton]

I’m not following? I’m trying to cycle through a dynamic set of paragraphs.

I think what I may need here is a variable that tells jQuery how many paragraphs I have (i++?) and then auto-cycles through all of those every so many seconds and or clicks.

[__]

Maybe like so?

#slider p{ display: none; }
#slider .show{ display: block; }

(You’d need to add the class show to whichever paragraph you want displayed by default.)

var $p = $("#slider p");
$p.each(function(i,e){
  $e = $(e);
  var nextP = (i+1 >= $p.length)? 0: i+1; console.log(nextP);
  var $nextP = $($p[nextP]);
  $e.on("click",function(e){
    $(this).removeClass("show");  
    $nextP.addClass("show");
  });
});

pen

[chrisburton]

What about cycling through like an auto-play feature? That’s what I’ve been trying to figure out.

Also, I’m not sure that would be possible to add a class of show. This is WP and the <p> tags are auto-generated.

[__]

What about cycling through like an auto-play feature? That’s what I’ve been trying to figure out.

I’m sure it could be done… maybe turn the event handler into a function for setInterval.

Also, I’m not sure that would be possible to add a class of show. This is WP and the <p> tags are auto-generated.

You could add it via javascript. In fact, you could add the relevant CSS at the same time, so everything would be visible in the case that js was disabled.

[chrisburton]

Good point. Thanks @traq.

[Author]

Posts