Menu icon Foundation
Orbit - One constant orbit-caption for all slider images

Hey guys!

I'm trying to create a background image slider with orbit. The content overlaid on top of the image slider needs to be constant. I've achieved the desired result using custom CSS positioning, however it is not properly responsive.

You can check it out at http://www.ideaabode.com

Now I'm trying to utilize the orbit-caption class to attain a result that is responsive. But I'm having to create separate orbit-caption divs for each image, just to have the same content across slides. This approach also breaks my LazyLine SVG animation. How can I create a single orbit-caption that sits on top of all the image sliders?

<ul data-orbit data-options="animation: 'fade'; timer_speed: 5000; pause_on_hover: false; animation_speed: 1000; navigation_arrows: false; slide_number: false; bullets: false; timer: true; variable_height: true">
	<li>
		<img src="img/hero-wave.jpg" alt="wave" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-2 text-center large-centered columns">
					<div id="idea"></div>
				</div>
			</div>
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
	<li>
		<img src="img/hero-stars.jpg" alt="stars" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-2 text-center large-centered columns">
					<div id="idea"></div>
				</div>
			</div>
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
	<li>
		<img src="img/hero-city.jpg" alt="city" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<div id="idea"></div>
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
</ul>

Idea abode website

Orbitorbit captionsvg animationcaption

Hey guys!

I'm trying to create a background image slider with orbit. The content overlaid on top of the image slider needs to be constant. I've achieved the desired result using custom CSS positioning, however it is not properly responsive.

You can check it out at http://www.ideaabode.com

Now I'm trying to utilize the orbit-caption class to attain a result that is responsive. But I'm having to create separate orbit-caption divs for each image, just to have the same content across slides. This approach also breaks my LazyLine SVG animation. How can I create a single orbit-caption that sits on top of all the image sliders?

<ul data-orbit data-options="animation: 'fade'; timer_speed: 5000; pause_on_hover: false; animation_speed: 1000; navigation_arrows: false; slide_number: false; bullets: false; timer: true; variable_height: true">
	<li>
		<img src="img/hero-wave.jpg" alt="wave" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-2 text-center large-centered columns">
					<div id="idea"></div>
				</div>
			</div>
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
	<li>
		<img src="img/hero-stars.jpg" alt="stars" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-2 text-center large-centered columns">
					<div id="idea"></div>
				</div>
			</div>
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
	<li>
		<img src="img/hero-city.jpg" alt="city" />
		<div class="orbit-caption">
			<div class="row">
				<div class="large-12 text-center large-centered columns">
					<div id="idea"></div>
					<h1>Hello and welcome to Idea Abode</h1>
					<p>- a team of designers, developers & testing engineers</p>
				</div>
			</div>
		</div>
	</li>
</ul>

Idea abode website
Bojan St over 5 years ago

maybe instead of captions try using a separate row with centered columns that has the desired text and moving it up with margin-top:rem-calc(-400 or what ever), to be on top of the slider, than just manipulate margin property for breakpoints to have it responsive, since its not centered absolutely. Best of luck