Slider from articles

alivato · 2015-01-19 22:30:50

How to display the last 5 articles one by one. With the use of a jquery plugin.

<txp:article limit=“5” />

jakob · 2015-01-20 00:48:27

I just happened to use this one yesterday, and it was very straightforward. You can style it how you like, it doesn’t have to be the full-screen slider the demo shows. This was roughly my code snippet.

<txp:article_custom section="whatever" break="" wraptag="ul" class="slider" limit="5">
      <li class="slide">
        <div class="slidecontent">
          <txp:image id='<txp:custom_field name="article_image" />' />
          <div class="slidecaption">
            <h2><a href="<txp:permlink />"><txp:title /></a></h2>
            <txp:body />
          </div>
        </div>
      </li>
 </txp:article_custom>

There are only two must-have css styles for the slider container and the slides, the rest you can group, position and style how you want. The script creates a slidetracker automatically which you can also style how you like.

Hope that helps…

uli · 2015-01-20 02:13:03

jakob wrote #287539:

There are only two must-have css styles for the slider container and the slides, the rest you can group, position and style how you want. The script creates a slidetracker automatically which you can also style how you like.

This sounds so great, Julian! Just: I need image navigation, no bullets. And these are hardcoded inside the JS. ^{(Why are all these RWD sliders/galleries so inflexible?!!)} The search continues (3am).

bici · 2015-01-20 08:21:03

uli wrote #287541:

This sounds so great, Julian! Just: I need image navigation, no bullets. And these are hardcoded inside the JS. ^{(Why are all these RWD sliders/galleries so inflexible?!!)} The search continues (3am).

Sounds like you are looking for a combination of these two examples latest news and image navi

jakob · 2015-01-20 09:52:20

uli wrote #287541:

This sounds so great, Julian! Just: I need image navigation, no bullets. And these are hardcoded inside the JS. ^{(Why are all these RWD sliders/galleries so inflexible?!!)} The search continues (3am).

I know what you mean. This one I found more by chance than design when looking for one that uses css transitions where possible and falls back to js only when needed.

You can use the attribute slideTracker: false to disable the bullets (or whatever you use) entirely, plus perhaps slideOnInterval: false to disable the slideshow. Otherwise, it’s a bit bare-bones but does provide functions for switching back and forth between slides and events for before and after when the slide has switched. See the readme…

In the demo on github, you can see a hard-coded example of a button on each slide that advances to the next slide (in a read-each-slide,-then-move-on fashion). For regular next/prev arrows you could create your arrows in jQuery and hook them up to the yourslider.nextSlide(); and yourslider.nextSlide(); events: Something like this (untested):

$(document).ready(function() {

    $(".slider").simpleSlider( {
        slideTracker: false,    // disable bullet nav
        slideOnInterval: false  // disable slideshow
    });

    // make slider data accessible
    var slider = $(".slider").data("simpleslider");

    // create slider arrow controls and add to slider container
    var slidercontrols = $('<ul class="slidercontrols"><li class="prev-slide">«</li><li class="next-slide">»</li></ul>');
    slidercontrols.appendTo('.slider');

    // attach next/prev slide functions to buttons
    $('.slidercontrols .prev-slide').on.click( function() { 
         slider.prevSlide();  // Go to the previous slide
    });
    $('.slidercontrols .next-slide').on.click( function() { 
         slider.nextSlide();  // Go to the next slide
    });

});

(Might need some tidying up. I didn’t use an a href="#" for the buttons, but if you want it, you’ll need to use preventDefault to prevent the click on the arrow doing something).

In my particular case, I had to reproduce an old flash slider in html where the caption slides in, so I used the .on("beforeSliding", … and .on("afterSliding", … to add a slide-in from left transition via transit.js (which is loaded as part of the slider anyway) once the slide has loaded.

jakob · 2015-01-20 10:19:35

Suddenly realised you might mean a slider that uses images as navigation like in bici’s examples. You might not necessarily need a fancy slider for that if you don’t need the thumb carousel. An “if I click this thumbnail, grab its img src, strip off the ‘t’ and change the img src of the main image correspondingly” which you could do with a couple of lines of js/jQuery.

You could probably also use the Simpleslider too, by manually creating your thumbs adding a counter to your thumbs and using the slider.nextSlide(counter number); to go to the given slide.

uli · 2015-01-20 13:28:31

~~admi~~ (oh dear!) alivato (!), sorry for pirating your topic, that’s bad behaviour, and I just hope there’s also some info here for you :]

bici, Julian thanks very much to both of you :)

bici, both your scripts look like I could make use of them, that’s great. Will try and have a deeper look. Thanks for the links!

Julian, thanks for your code and tips, especially for continued pondering after posting. I, too, thought that what I needed could actually be handcoded with ease. But my JS skills are ridiculous when it comes to arrays and indexes, and not least: Time pressure is a killer for staying cool. Last night I discovered Slider Pro which is very versatile from its possibilities and from what it accepts code-side, though ≈118k minified is horrendous. Maybe as a last resort, cause the client tends to change her intentions often enough.

Julian, I’m grateful for all your input here in this forum over years and for the generosity by which you share your experiences. A huge “Thank you”, I’ve learnt so much from your postings :)

Last edited by uli (2015-01-20 13:44:02)

jakob · 2015-01-20 18:10:24

Uli, I have to say exactly the same for you. You’re also über-polite at the same time!

My js skills are probably no better than yours, and there’s usually quite some trial and error involved. But it is satisfying to work it out and understand why. You’re right, of course, that’s not as much fun when a deadline is looming.

Slider Pro looks full-featured but that size… gasp. I have a paid licence for RoyalSlider, which I’d used on a project a while back and knew had fade/slide-in titles, but on revisiting now a few versions on, it seemed overloaded with features and had grown larger (52kb minified, older version 25kb). I went in search of alternatives and chanced upon SimpleSlider (6kb minified). There are masses more out there, of course.

RedFox · 2015-01-20 21:03:36

I don’t know if this post is about sliders sec, but this one is very Slick

[edit]
And a new kid on the block > Flickity … :)

Last edited by RedFox (2015-01-27 11:13:53)

Textpattern CMS

Textpattern CMS support forum

#1 2015-01-19 22:30:50