Canvas Support

Custom text slider

4 replies · opened Oct 28, 2016

OoctobunnyOct 28, 2016

Hi,

I've attached a quick-and-dirty concept art for the slider I want to create for my scientific personal website.

Particularly the following points should be met:

  1. The slider should be full-width but its content should have the same reduced width as the remaining website content (in my case: op-personal.html).
  2. Within the slider there should be a small, centered title.
  3. The remaining text below, which includes a larger second title, should be flush-left but should not wrap around the image.
  4. The slider should not be autorunning.
  5. When the arrow buttons are pressed, content should slide in from right to left.
  6. At the bottom of the slider there should be progression indicators (filled/empty circles).

Can this be realised with "Canvas", and if yes, could you provide me with some code?

Thank you in advance for you help and best regards,
Michael

OoctobunnyOct 28, 2016

Attachment was too large; here a smaller version.

SSemicolon WebSTAFFNov 2, 2016

Hello,

This is Definitely Possible and you can simply use the .fslider Element (Documentation > Shortcodes > Responsive Slider) to achieve this easily using the Default Headers and the Column Grid to create this Slider. Here is an Example Code: 


	
		
			
				
					Demo Title
					
						
							
![attachment](http://placehold.it/250x250)

						
						
							Demo Title
							
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga placeat quam ea reiciendis vero aliquam non assumenda et alias reprehenderit, dolorem cum adipisci quasi voluptate ducimus, corporis saepe at impedit molestias tenetur? Numquam repellat sapiente delectus similique soluta, saepe dolores error voluptas dignissimos unde? Sint pariatur quod dicta iste voluptatem!

						
					
				
			
			
				
					Demo Title
					
						
							
![attachment](http://placehold.it/250x250)

						
						
							Demo Title
							
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga placeat quam ea reiciendis vero aliquam non assumenda et alias reprehenderit, dolorem cum adipisci quasi voluptate ducimus, corporis saepe at impedit molestias tenetur? Numquam repellat sapiente delectus similique soluta, saepe dolores error voluptas dignissimos unde? Sint pariatur quod dicta iste voluptatem!

						
					
				
			
			
				
					Demo Title
					
						
							
![attachment](http://placehold.it/250x250)

						
						
							Demo Title
							
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga placeat quam ea reiciendis vero aliquam non assumenda et alias reprehenderit, dolorem cum adipisci quasi voluptate ducimus, corporis saepe at impedit molestias tenetur? Numquam repellat sapiente delectus similique soluta, saepe dolores error voluptas dignissimos unde? Sint pariatur quod dicta iste voluptatem!

This will definitely work fine. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

OoctobunnyNov 3, 2016

Wonderful. Thank you very much for this great template!

SSemicolon WebSTAFFNov 4, 2016

Hello,

Thank You so much for the Kind Words. :)

Really Glad that you find Canvas useful for your Projects. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard