Demo – Business Consulting

[middlemann]

Hey guys,

I really like the way the webpage looks in the browser on the Business Consulting demo. https://www.okler.net/previews/porto/12.0.0/demo-business-consulting.html

I want to adopt it for my site but I just want a static image not a carousel. The carousel wouldn’t be a problem if I could get it to stop automatically going through the slides. Even if I only have one slide in the carousel, it still cycles through as if there is more than one slide. Please advise.

---

[Support]

Hi, try to add the carousel using this HTML

<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual mb-0" data-plugin-options="{'nav': false, 'dots': false, 'autoplay': false}" style="height: 100vh;">
	<div class="owl-stage-outer">
		<div class="owl-stage">
		
			<div class="owl-item position-relative pt-5" style="background-image: url(img/demos/business-consulting/slides/slide-1.jpg); background-size: cover; background-position: center;">
				<div class="container position-relative z-index-3 pb-5 h-100">
					<div class="row align-items-center pb-5 h-100">
						<div class="col">
							<h1 class="custom-secondary-font text-color-light font-weight-extra-bold text-8 line-height-1 line-height-sm-3 mb-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">Get your<br><span class="custom-secondary-font text-4-5">Free Consultation</span></h1>
							<a href="#" class="btn btn-primary btn-modern font-weight-bold text-2 py-3 btn-px-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">GET STARTED</a>
						</div>
					</div>
				</div>
			</div>
		
		</div>
	</div>
</div>

---

[middlemann]

that works perfectly – thank you.

one other thing: there is a small vertical line just to the right of the header menu that i can’t seem to get rid of – any ideas?

---

[Support]

To remove that add this:

(css/custom.css):

@media (min-width: 992px) {
    #header .header-nav-features.header-nav-features-lg-show-border:before, #header .header-nav-features.header-nav-features-lg-show-border:after {
        display: none;
    }
}

---

[middlemann]

can the owl carousel on the business consulting demo support video?

---

[Support]

Hello, here’s an example of slide with video:

<!-- Carousel Slide 2 -->
<div class="owl-item position-relative video overlay overlay-color-dark overlay-show overlay-op-2" data-video-path="video/busy" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;">
	<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 text-center">
				<div class="d-flex flex-column align-items-center justify-content-center h-100">
					<h1 class="text-color-light font-weight-extra-bold text-10 text-md-12-13 line-height-1 line-height-sm-3 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">HELLO & WELCOME</h1>
					<p class="text-4-5 text-color-light font-weight-light text-center mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 30}">Porto is trusted by over 40,000 satisfied users. Learn more about us and our amazing projects.</p>
					<a href="#" class="btn btn-dark btn-modern font-weight-bold text-3 rounded-0 btn-py-3 btn-px-5 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300" data-plugin-options="{'minWindowWidth': 0}">GET STARTED NOW!</a>
				</div>
			</div>
		</div>
	</div>
</div>

---

[Author]

Posts