One page with static image instead of carousel

[obrian7]

I’m attempting to use your “index-one-page.html” demo as a template to build a one-page website, but I’d like to have a static image instead of the Owl Carousel currently at the top. I tried deleting all the Carousel Slides in the template except the one I wanted to use, but when I load the page in a browser it still acts as if there are other sliders present. I get a white background for about 7 seconds, a brief flash of gray and then white for another ~7 seconds, then finally the slide I’ve edited shows. How do I change it so that only one slide loads (preferably with the animated text as you’ve shown). Should I omit the carousel entirely and insert a static, full width image?

---

[Support]

Hello, first thanks for your purchase.

Replace the entire owl-carousel code with this new below:

<section class="section border-0 m-0" style="background-image: url(img/slides/slide-one-page-1-1.jpg); background-size: cover; background-position: center; height: 100vh;">

	<!-- Carousel Slide 1 -->
	<div class="container position-relative z-index-3 h-100">
		<div class="row justify-content-center align-items-center h-100">
			<div class="col-lg-6">
				<div class="d-flex flex-column align-items-center">
					<h3 class="position-relative text-color-light text-4 line-height-5 font-weight-medium px-4 mb-3 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
						<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
							<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
						</span>
						WE WORK HARD AND PORTO HAS
						<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
							<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
						</span>
					</h3>
					<h2 class="text-color-light font-weight-extra-bold text-12 mb-4 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">
						THE <span class="position-relative">BEST<span class="position-absolute left-50pct transform3dx-n50 bottom-0"><img src="img/slides/slide-blue-line-big.png" class="w-auto mt-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span> DESIGN
					</h2>
					<p class="text-4 text-color-light font-weight-light opacity-7 text-center mt-2 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 25}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of larest world's MarketPlace</p>
					<a href="#" class="btn btn-primary btn-rounded font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1600" data-plugin-options="{'minWindowWidth': 0}">GET STARTED NOW!</a>
				</div>
			</div>
		</div>
	</div>

</section>

* In the example above I maintained the content of carousel slide 1 and wrapped it inside a section with the background image.

We hope this helps!

Please try that and let us know if you need further assistnace.

Kind Regards,

Rodrigo.

---

[Author]

Posts