I was wondering if anyone has found a good solution for making a text only slider.
I want a customer feedback slider to run, but I have to add a third party slider at the moment and I’m remaking my site.
My current one is a Masterslider build, and all sorts of css and js needs to be added, then make changer at code level.
Test lower in this page
Thanks in advance, Andy
I am a fan of Owl2, its been abandoned recently, but the code is still good. I use it because its so simple to setup. And you can carousel anything with basic HTML. It also is responsive.
I have Owl but haven’t tried it with a header and paragraph in each slide
You mean the Blocs Bric? I don’t think that supports text just images.
Owl2 is very easy to setup though.
If you only want text with no user interaction other than advancing the slider, you can simply add a title & paragraph bric to the empty container you see in the carousel slides. You can then edit or style the text as required. If you want the text centred vertically in the slide, select the paragraph element and create a custom class. In the metrics tab of the class editor, adjust the bottom margin to move the whole bric up so that it is more vertically centred within the slide.
You will also have to add an image to the slide. This should be a simple transparent png so that the background colour of your page or bloc shows through the slider. The size of the image doesn’t really matter, but the aspect ratio is important as it will dictate the aspect ratio of your slide. For example, if you want your slide to have an aspect ratio of 16:9 you could create a simple transparent png in a graphics app sized at 16px wide x 9 px high. When added to your slides it will scale up to fill the width of the column in which the carousel has been placed. Just be sure to use the same background image on every slide to keep the carousel slide sizes consistent.
Here is an example of how it should look with a plain white background and black text.
And here is how you adjust the position of the paragraph text with a custom class. Just apply the class to the paragraph element and the heading element will go along for the ride.
Note: Depending on how much text you place into each slide you may have to create a custom class for every slide. If the amount of text is the same in each slide, you can use the same custom class on every slide. If you want the heading to be the same for every slide, just use a paragraph bric in the slide itself and add the common heading above the carousel. This will then look like the example you posted - the heading will remain static whilst the paragraph text will change upon each advance of the slides.
Thanks for the effort you put in your reply @hendon52.
All this makes sense. I wonder if setting a class so the block s a set % height to avoid the page jumping as different text slides through.
@PeteSharp
Ye, I paid for the Owl brick, but it’s a bit basic for a modern image gallery.
The text slider may be worth a fiddle with though.
May as well try to get something working for my money eh?!
Rather than trying to set a height for the bloc, it’s better to simply use a correctly sized transparent png on each slide, preferably the same image in every slide. This will absolutely ensure that there is no jumping as the slides progress. This is why I suggested that you align the text on each slide visually using custom classes. This will ensure that, no matter how much text you place in a slide, it will not change the size of the slides in the carousel - this will be determined by the size or ratio of the transparent png.
Below are two screen shots of two different slides - each has a different amount of text but neither the size of the carousel nor the height of the containing bloc changes.
In the above example, I used a transparent png sized 9px wide x 3px height. This gives me the constantly sized carousel regardless of the quantity of text it contains - I simply created a custom class for slide 1 and a different custom class for slide 2. This allowed me to position the text within the carousel separately for each slide.
When using this option, it’s important to remember that you will most likely have to create a different carousel for some device variants and use the visibility options to show the correct carousel on each device. For the desktop and tablet device variants you should only need to adjust the font size and text position in the respective classes to ensure that the carousel displays everything correctly. On the mobile variants, you may have to create a new carousel with a different aspect ratio image. This is because as the text wraps to the narrower device screens, the text will take up more lines and thus the slides will need more height to display properly. For mobile variants you could use a transparent PNG at say 16px wide by 8px height.
I see.
So I can’t make the bloc or brick size dynamic due to it being a proportion set by a transparent .png. This could lead to a difficult decision as to when to break from some appliances in portrait from others in landscape.
What a pain in the botty!
I’ll need to work on this by trial and error.
Thanks for the well explained guidance; as always there are Blocheads to guide the rest of us.
I would use CSS rather than an image.
You can wrap the items in a div using flex.
Hi @PeteSharp
This looks like the framework employed by Masterslider, although their (priced) formatting options are fantastic. For me though I just need a clean text slider.
I have used more lavish design in my home page top image slider and now I just edit the html code.
The trouble is I need to add all sorts of .js and .css files I don’t understand to get them to work, so maybe this would be a much cleaner option.
I don’t know how it works, but I may jump down the rabbit hole soon; wish me luck!!
As with most on the forum, your knowledge is very much appreciated as I understand wood well, but coding …not so good.
But I love a challenge.
This is the same framework Blocs uses.
BS4 i assume.
How do i get the code for the carousel from the link to the Flex page?
This looks perfect but i don’t know how to get the code and associated fees i may need.
