Add a content slider to the core

[leofeyer]

Use https://github.com/aschempp/contao-powerslide as starting point and don't forget a jQuery variant.

[aschempp]

Also include http://swipejs.com

[brandbrilliance]

Any progress on this, or shall I make my own version for 3.x?

[aschempp]

@thyon unfortunately, it wont make it into Contao 3.0, the milestone is currently on 3.1

[brandbrilliance]

This PowerSlide has a few problems. It doesn't actually slide content, it actually just places the next block at the visible block edge and then only slides that one into view. This means if you have 7 "tab/content" sections it doesn't do the expect 6 slider quick scroll to get to number 7, it simply places 7 at the edge and slides 1 away and 7 into view. This kind of tab/slide behavior looks wonderful and works very well, so the sliding behavior off noob_slider is better with that regard. I like the preview sections though.

I did find a bug in the code, where if you slide the wrong x value would be calculated, making the slide not slide but already be at 0. Since it's related to the sliding method, if you change to a new method, that will be easier to use.

There should also be an option to prevent auto-play, but read my comments about tabs below.

I also like the option of having a slide auto-adjust to the section's height. This works very well and makes variable content parts easier to view, without large blocks of nothing, if the sections have less or more content.

If we add a display/fade and height adjustment from above, then this slider could effectively also become a built-in tabbed interface, which would be an excellent addition to contao.

Then lastly, there are a few implementations which use the #section1 url tagging to auto-diplay the correct section when you load the page, so if you hotlink directly to a section then it will auto-show/slide to that section.

You can see the CODA slider as reference (uses query tho) http://www.ndoherty.biz/coda-slider

[aschempp]

@thyon thanks for your feedback! I totally agree that the PowerSlide javascript is not the best. It needs to be reworked, as we wrote to include www.swipejs.com. However, I like the backend concept, where you can have unlimited content elements grouped. I think that is a powerful feature I have not found anywhere (except for the new noobslider, which copied from me ;) ). The javascript is just markup to me ^^

[brandbrilliance]

I actually have a working version on 3.x of the NoobSlider. It has preview elements which if you click slides to that element with animation or not. Also, I added an autoHeight parameter, so that I can automatically set the container to have the correct height once all the images are loaded (using the onLoad() method) and then when you slide/change to another tab, it will auto-adjust the height to the new value. This looks great and then you can use this as a tabbed interface as well, just disable any animations, or make it just cross-fade.

It will be on my updated website.

[aschempp]

@leofeyer @psi-4ward we should get back to this on the next call, I've run into some issues while trying to implement swipejs on powerslide.

[Metis77]

Is http://jquery.malsup.com/cycle/ an option as jQuery variant? It is fast, flexible, lightweight and works robust.

[Serhii-DV]

The jQuery Cycle Plugin is a slideshow plugin...

So, it is not a content slider. As a jQuery content slider variant we can use Scrollable plugin from jQuery Tools UI library. It can be used for scrolling any type of content elements.

[Metis77]

@DyaGa Yes it is a slideshow plugin. It also brings everything you need for a content slider.

[Serhii-DV]

Ok, maybe I am wrong. But, to my mind, Cycle Plugin is only good for sliding images. I have used them both and my choice is a Scrollable plugin.

[danielritter]

Ich empfehle den Content Slider Revolver. Es gibt je eine Version für Mootools und eine für jQuery. Letztes Update: Januar 2013

Webseite: http://revolverjs.com/ Github: https://github.com/revolverjs

[leofeyer]

@danielritter Very nice, thank you. We'll give it a try.

[bekanntmacher]

Wichtig wäre mir, dass der Slider zu einem hohen Grad individualisierbar ist.

Bsp.: die meisten Slider verlangen im Startelement eine Angabe: width in Pixeln. Wenn man mit Prozentwerten arbeiten will, muss schon gebastelt werden.

Für "Start", "End" und das js soll ein template zur Verfügung stehen.

[leofeyer]

Geplant ist es, das Element so wie das Akkordeon aufzubauen (Container-Start, Container-Ende und Container-Einzelelement). Vermutlich werden wir mit Partials arbeiten (so wie bei der Galerie), so dass verschiedene Konfigurationen hinsichtlich der Steuerelemente möglich sind.

[bekanntmacher]

Beim Akkordeon ist es gut gelöst, man kann die Tpl's inklusive js anpassen.

[danielritter]

Ich habe hierfür auch schon eine mehr oder weniger funktionsfähige Erweiterung für 2.10-2.11 geschrieben. Gestern Abend habe ich mich nochmals daran gewagt und versucht sie für Contao 3 zu implementieren. Die alte Erweiterung, die aktuellen Javascript-Files zu Revolver und das neue Modul für Contao 3 im frühen alpha-Stadium findest du hier zum Download:

www.designr.ch/files/downloads/modules/Slider.zip

Du kannst alle meine Dateien uneingeschränkt verwenden und für den Content Slider verwenden, wenn du möchtest.

[leofeyer]

Implemented in 432f94888d91824660518317f2f0c51b7920f82c.

[Toflar]

Revolver is a framework and thus doesn't implement any swipe support. Should we add this in the core?

[aschempp]

I love support like www.swipejs.com, but I suppose that is not possible with Revolver...

[leofeyer]

There is a mootools-mobile.js script already which adds swipe support to the media box. It should not be too hard to add it to the slider as well.

[Toflar]

Is it the script by Christoph Pojer? If so, then :+1: I'm pretty sure jQuery has swipe events too :)

[aschempp]

Yes that will work. But is not really nice swipe :-(

[leofeyer]

What is the difference between "nice swipe" and "normal swipe"? :)

BTW, the default slider implementation does not use any controls at all, so it actually does not need swipe. Only if you add controls to manually slide the items, you should think about it (however, the controls are buttons which do work on mobile devices natively).

[aschempp]

look at how www.swipejs.com works. You can actually drag the section. It behaves similar to the home screens on an iPhone.

[leofeyer]

Ran some very impressing tests and agree that we should use swipe.js!

[leofeyer]

Changed in 325f180600d050c5fd9fab18ae23c4455b919e14.

[psi-4ward]

@leofeyer https://github.com/contao/core/blob/develop/assets/swipe/2.0/css/swipe.css#L11

use .slider-wrapper > * instead of .slider-wrapper .ce_text to support all content-elements

[leofeyer]

Is there a content element which does not have a ce_ class?

[psi-4ward]

Ive some custom HTML-Elements withouth ce_text and think of the other CEs (not only ce_text) like ce_accordoin, ce_headline, ce_image and so on...

Moreover ive used swipejs to slide whole articles which works great but i need something like .slide-wrapper .mod_article.

[leofeyer]

Changed in 555ff8e3bb8f906c212a617597648a1ff25a62e9.

[leofeyer]

Update the dot menu on swipe.

[leofeyer]

Fixed in ffda76a55a168682f911afb6f471338c9047d9bf.