Searching for a simple slider

Hi everybody,

Newbee here. I am designing a product teaser page and need something like a carousel/slider bric. Here is what I am trying to achieve:


All carousel/slider topics I found in this forum are very image based. They seem to work more towards a gallery/slideshow approach.

At the bottom of this page is another example of a simple slider that would totally work for me.

What would be your recommended steps to get me towards my described goal?

Thanks for your help and inspiration.

me

You can use a normal carousel in Blocs. when it’s on the page, select the caption area and add a 2 column bric into the area. Then select a paragraph bric and place one in each of the columns you just created. This will give you the two columns of text you need. With the caption area selected again. Create a custom class and add bottom padding to the caption area so that your text moves up towards the middle of the carousel. (see illustration below). If you do not want a picture in the carousel, make a blank transparent PNG 1500 x 500 px and use that as the image. This will then show the text over whatever background you set for the bloc as a whole. Repeat this procedure for each of the other slides in the carousel.

End Result

P.S. There is a little quirk in Blocs that centres the text in each paragraph bloc placed in the caption area, even though the properties panel shows the paragraph as being left aligned. Just click again on the left aligned icon in the properties panel and it will be ok.

1 Like

Wow, thanks Hendon52 for your detailed reply. What you are suggesting was exactly my first choice.

Here is a video of how it looks when I go that route:

So the 3 issues I ran into were:
• I can’t access my 2 column grid in the bottom to actually enter some text like you did.
• I have no clue why my image gets all scaled up and how to avoid that
• How do I get the text beneath the image and not on top of the image

I feel like I am not really far away but I can’t really find answers to these three questions.

Thanks for your help Hendon52.

me

Accessing the two column grid is problematic because you have basically nested divs inside a div. The way to handle this is to not even try to select the extra divs from the left panel at all. Go to the bric selector on the right and choose your paragraph bric from there (I used the title and paragraph bric). Then hover your mouse over one of the columns - it will turn blue on hover - then click to place the text bric. Repeat for the other column.

You should now edit your text and ensure that it’s all left aligned. What you get is something like this:

Now, if you want to incorporate your image, make it PART of the transparent PNG. In other words, don’t simply add it as an image to the carousel. Remember, the height of the carousel will be dictated by the height of the image you place within it. In my example, I created a transparent PNG 1200 x 500 px then added the logo/design and scaled it within the boundary of the slide image. It looked like this (I’ve created as black on transparent so you can see it in this post - you would probably use a white on transparent logo in your design.)

Now, the logo/design is placed within the image to create the space you need for the captions. Export this image from your image editing application as a transparent PNG and add it as a slide to the carousel. It will look something like this:

If the text looks a little bit close to the logo/design, the easiest way to correct it is to go back to your image editor and increase the size of your slide image (maybe 1200 x 600 px). However, DON’t make any changes to your image until you have previewed the slider - there is a marked difference between what you see in the blocs editing environment and what you see in preview. The image below is is how my example looks in preview:

As you can see, the spacing between the logo/design and the text is much larger.

It may be a bit of trial and error regarding the final image dimensions, but once you’ve got it set for your most text intensive slide, use the same dimensions for all the slides in your carousel.

1 Like

Hi Hendon52,

just wanted to come back and say thank you. Your tipps really did solve my problem. I had some final issues on making this carousel working on mobile as well but providing each carousel item with a custom class that has a height property did solve the trick to adjust the content responsivly.
Thank you for all your help. It was clear and precise. Thumbs Up.

me.

1 Like