Reply To: Portfolio Single Project Carousel

[Support]

HTML:

<div class="container">

	<div class="row">
		<div class="col-md-12">
			<div class="portfolio-title">
				<div class="row">
					<div class="portfolio-nav-all col-md-1">
						<a href="portfolio-single-project.html" data-tooltip data-original-title="Back to list"><i class="fa fa-th"></i></a>
					</div>
					<div class="col-md-10 center">
						
					</div>
					<div class="portfolio-nav col-md-1">
						<a href="#" class="portfolio-nav-prev" data-tooltip data-original-title="Previous"><i class="fa fa-chevron-left"></i></a>
						<a href="#" class="portfolio-nav-next" data-tooltip data-original-title="Next"><i class="fa fa-chevron-right"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="owl-carousel owl-theme manual" id="projectsCarousel">
		<div>
			<div class="row">
				<div class="col-md-12">
					<div class="portfolio-title">
						<div class="row">
							<div class="col-md-10 col-md-offset-1 center">
								<h2 class="mb-none">Lorem Ipsum Dolor</h2>
							</div>
						</div>
					</div>

					<hr class="tall">
				</div>
			</div>

			<div class="row">
				<div class="col-md-4">

					<span class="img-thumbnail">
						<img alt="" class="img-responsive" src="img/projects/project.jpg">
					</span>

				</div>

				<div class="col-md-8">

					<div class="portfolio-info">
						<div class="row">
							<div class="col-md-12 center">
								<ul>
									<li>
										<a href="#" data-tooltip data-original-title="Like"><i class="fa fa-heart"></i>14</a>
									</li>
									<li>
										<i class="fa fa-calendar"></i> 21 November 2013
									</li>
									<li>
										<i class="fa fa-tags"></i> <a href="#">Brand</a>, <a href="#">Design</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<h4 class="heading-primary">Project <strong>Description</strong></h4>
					<p class="mt-xlg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus nibh sed elimttis adipiscing. Fusce in hendrerit purus. Suspendisse potenti. Proin quis eros odio, dapibus dictum mauris. Donec nisi libero, adipiscing id pretium eget, consectetur sit amet leo. Nam at eros quis mi egestas fringilla non nec purus.</p>

					<a href="#" class="btn btn-primary btn-icon"><i class="fa fa-external-link"></i>Live Preview</a> <span class="arrow hlb appear-animation" data-appear-animation="rotateInUpLeft" data-appear-animation-delay="800"></span>

					<ul class="portfolio-details">
						<li>
							<p><strong>Skills:</strong></p>

							<ul class="list list-inline list-icons">
								<li><i class="fa fa-check-circle"></i> Design</li>
								<li><i class="fa fa-check-circle"></i> HTML/CSS</li>
								<li><i class="fa fa-check-circle"></i> Javascript</li>
								<li><i class="fa fa-check-circle"></i> Backend</li>
							</ul>
						</li>
						<li>
							<p><strong>Client:</strong></p>
							<p>Okler Themes</p>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<div>
			<div class="row">
				<div class="col-md-12">
					<div class="portfolio-title">
						<div class="row">
							<div class="col-md-10 col-md-offset-1 center">
								<h2 class="mb-none">Lorem Ipsum Dolor 2</h2>
							</div>
						</div>
					</div>

					<hr class="tall">
				</div>
			</div>

			<div class="row">
				<div class="col-md-4">

					<span class="img-thumbnail">
						<img alt="" class="img-responsive" src="img/projects/project.jpg">
					</span>

				</div>

				<div class="col-md-8">

					<div class="portfolio-info">
						<div class="row">
							<div class="col-md-12 center">
								<ul>
									<li>
										<a href="#" data-tooltip data-original-title="Like"><i class="fa fa-heart"></i>14</a>
									</li>
									<li>
										<i class="fa fa-calendar"></i> 21 November 2013
									</li>
									<li>
										<i class="fa fa-tags"></i> <a href="#">Brand</a>, <a href="#">Design</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<h4 class="heading-primary">Project <strong>Description</strong></h4>
					<p class="mt-xlg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus nibh sed elimttis adipiscing. Fusce in hendrerit purus. Suspendisse potenti. Proin quis eros odio, dapibus dictum mauris. Donec nisi libero, adipiscing id pretium eget, consectetur sit amet leo. Nam at eros quis mi egestas fringilla non nec purus.</p>

					<a href="#" class="btn btn-primary btn-icon"><i class="fa fa-external-link"></i>Live Preview</a> <span class="arrow hlb appear-animation" data-appear-animation="rotateInUpLeft" data-appear-animation-delay="800"></span>

					<ul class="portfolio-details">
						<li>
							<p><strong>Skills:</strong></p>

							<ul class="list list-inline list-icons">
								<li><i class="fa fa-check-circle"></i> Design</li>
								<li><i class="fa fa-check-circle"></i> HTML/CSS</li>
								<li><i class="fa fa-check-circle"></i> Javascript</li>
								<li><i class="fa fa-check-circle"></i> Backend</li>
							</ul>
						</li>
						<li>
							<p><strong>Client:</strong></p>
							<p>Okler Themes</p>
						</li>
					</ul>

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

</div>

JS:
(js/custom.js)

var owlProjects = $('#projectsCarousel');

owlProjects.owlCarousel({
    loop:false,
    margin:1,
    nav:false,
	dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

// Custom Navigation Events
$(".portfolio-nav-next").click(function(e) {
	e.preventDefault();
	owlProjects.trigger('next.owl.carousel');
});

$(".portfolio-nav-prev").click(function(e) {
	e.preventDefault();
	owlProjects.trigger('prev.owl.carousel');
});

---