Canvas Support

Custom text slider

4 replies·opened Oct 28, 2016
O
octobunnyOct 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

O
octobunnyOct 28, 2016

Attachment was too large; here a smaller version.

S
SemiColonWebSTAFFNov 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: 

<div class="fslider testimonial testimonial-full noshadow noborder nopadding">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide">
				<div class="container clearfix">
					<h4 class="center uppercase">Demo Title</h4>
					<div class="row clearfix">
						<div class="col-md-3">
							<img src="http://placehold.it/250x250" class="img-circle img-thumbnail" alt="Demo Image">
						</div>
						<div class="col-md-9">
							<h3>Demo Title</h3>
							<p>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!</p>
						</div>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="container clearfix">
					<h4 class="center uppercase">Demo Title</h4>
					<div class="row clearfix">
						<div class="col-md-3">
							<img src="http://placehold.it/250x250" class="img-circle img-thumbnail" alt="Demo Image">
						</div>
						<div class="col-md-9">
							<h3>Demo Title</h3>
							<p>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!</p>
						</div>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="container clearfix">
					<h4 class="center uppercase">Demo Title</h4>
					<div class="row clearfix">
						<div class="col-md-3">
							<img src="http://placehold.it/250x250" class="img-circle img-thumbnail" alt="Demo Image">
						</div>
						<div class="col-md-9">
							<h3>Demo Title</h3>
							<p>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!</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

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.

O
octobunnyNov 3, 2016

Wonderful. Thank you very much for this great template!

S
SemiColonWebSTAFFNov 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