Use one slide only

[manu]

Hello, how can i use just one slide (the second one) from here:
https://portotheme.com/html/porto/7.5.0/index-one-page.html

The slide code i want to use only:

<!-- Carousel Slide 2 -->
							<div class="owl-item position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-2.jpg); background-size: cover; background-position: center;">
								<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-5 line-height-5 font-weight-medium px-4 mb-2 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"" 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"" alt="""" />
													</span>
												</h3>
												<h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2>
												<p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" 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>
											</div>
										</div>
									</div>
								</div>
							</div>

---

[Support]

Hello, this is the code you need:

<div id="home" class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplay': false}" style="height: 100vh;">
	<div class="owl-stage-outer">
		<div class="owl-stage">

			<!-- Carousel Slide 2 -->
			<div class="owl-item position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-2.jpg); background-size: cover; background-position: center;">
				<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-5 line-height-5 font-weight-medium px-4 mb-2 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-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2>
								<p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" 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>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

Regards.

---

[manu]

Hi, thank you! that worked.
But how can i hide the dots and navigation buttons from the slide? If i comment out or remove the following code, i get multiple errors:

</div>
					<div class="owl-nav">
						<button type="button" role="presentation" class="owl-prev"></button>
						<button type="button" role="presentation" class="owl-next"></button>
					</div>
					<div class="owl-dots mb-5">
						<button role="button" class="owl-dot active"><span></span></button>
						<button role="button" class="owl-dot"><span></span></button>
						<button role="button" class="owl-dot"><span></span></button>
						<button role="button" class="owl-dot"><span></span></button>
					</div>

---

[Support]

Hello, you can hide adding the class d-none “<div class=”owl-nav d-none”>”

Or with this css:

(css/custom.css)

.owl-nav, .owl-dots {
	display: none !important;
	visibility: hidden;
}

Regards.

---

[manu]

Worked perfectly, thank you!

---

[Author]

Posts