Item page - sections
These section can be used to represent a description or details about an item. They are used by item.html file
CODE
Here is the HTML code to obtain it. Embed it within the main tag with class page-main.
Cover
HTML Home cover section
<!-- Begin of home section -->
<div class="section section-item section-home-item framed-lr framed-top" data-section="item-home">
<div class="section-cover-full fit max mask-black bg-img" data-image-src="./img/items/img-sample2.jpg">
</div>
<!-- Begin of section wrapper -->
<div class="section-wrapper mediumwidth with-margin v-center h-center elevated">
<!-- content -->
<div class="section-content anim margin-tb">
<div class="row ">
<div class="col-12 col-lg-6 text-left">
<!-- title and description -->
<div class="title-desc">
<h1 class="display-4 display-title home-title anim-1">Mechanics Page</h1>
<p class="anim-2">Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula
fermentum a sit amet nulla. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit.
Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
</div>
<!-- Action button -->
<div class="btns-action anim-5">
<a class="btn btn-arrow btn-primary" href="#link">
<span class="icon">
<span class="arrow-right"></span>
</span>
<span class="text">Website</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End of section wrapper -->
</div>
<!-- End of home section -->
Content
HTML Content section
<!-- Begin of list two side 1 section -->
<div class="section section-item bg-level-2" data-section="item-alpha">
<!-- Begin of section wrapper -->
<div class="section-wrapper largewidth">
<!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->
<!-- begin of item -->
<div class="item row">
<!-- begin of text content -->
<div class="col-12 center-vh">
<!-- content -->
<div class="section-content anim">
<article class="article article-light">
<div class="article-content">
<div class="wrapper">
<h2>Description</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat.
Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis
pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque.
Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus
vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt
tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit
metus ut arcu iaculis iaculis.</p>
<!-- begin of illustation -->
<div class="item row justify-content-between mt-4">
<!-- img-frame-normal demo -->
<div class="col-12 col-md-6 center-vh">
<div class="section-content anim">
<div class="images text-center">
<div class="img-frame-normal">
<div class="img-1">
<img class="img" src="img/items/img-sample7.jpg" alt="Image">
</div>
<div class="legend text-left">
<h5>Laptop & Desktop</h5>
<p class="small">Art / Programing</p>
</div>
</div>
</div>
</div>
</div>
<!-- img-frame-normal demo, portrait orientation -->
<div class="col-12 col-md-6 col-lg-5 center-vh">
<div class="section-content anim">
<div class="images text-center">
<div class="img-frame-normal frame-small portrait">
<div class="img-1">
<img class="img" src="img/items/img-portrait.jpg" alt="Image">
</div>
<div class="legend text-right">
<h5>Mobile Layout</h5>
<p class="small">Art / Programing</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of illustation -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat.
Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis
pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque.
Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem.
</p>
</div>
</div>
<footer class="article-footer">
<div class="article-details">
<div class="media media-article-title">
<img class="media-image d-flex align-self-center mr-3 rounded-circle" src="img/avatar.png" alt="Generic placeholder image">
<div class="media-body align-self-center">
<h5 class="mt-0 media-title">
<strong>Tim Lucas</strong>
</h5>
<p class="mb-0 t-nowrap">Designer & Blogger for 20 Magazine</p>
<p class="mb-0 t-nowrap">January 20, 2018</p>
</div>
</div>
</div>
</footer>
</article>
<!-- Action button -->
<div class="btns-action mt-4">
<a class="btn btn-outline-primary btn-round" href="#link">
Download
</a>
<a class="btn btn-transp-arrow btn-outline btn-primary btn-round" href="item.html">
<span class="icon arrow-right"></span>
<span class="text">Next</span>
</a>
</div>
</div>
</div>
<!-- end of text content -->
</div>
<!-- end of item -->
</div>
<!-- End of section wrapper -->
</div>
<!-- End of list two side 1 section -->
Slider - Other items
HTML Slider section
<!-- Begin of slider section -->
<div class="section section-item-slider bg-level-1" data-section="item-alpha">
<!-- Begin of section wrapper -->
<div class="section-wrapper fullwidth anim">
<!-- begin of slider -->
<div class="slider-wrapper carousel-swiper-beta carousel-swiper-beta-demo anim-3">
<!-- slider -->
<div class="slider-container swiper-container">
<ul class="item-list swiper-wrapper">
<!-- item -->
<li class="slide-item swiper-slide">
<div class="item-wrapper">
<div class="illustr">
<img class="img img-block" src="img/items/img-sample1.jpg" alt="Image">
</div>
<div class="legend">
<a href="item.html#project_url">
<h3>Paper Design</h3>
<h4>Art / Print</h4>
</a>
<div class="icons">
<a class="icon-btn" href="#">
<i class="icon fa fa-instagram"></i>
</a>
<a class="icon-btn" href="#">
<i class="icon fa fa-twitter"></i>
</a>
</div>
</div>
</div>
</li>
<!-- item -->
<li class="slide-item swiper-slide">
<div class="item-wrapper">
<div class="illustr">
<img class="img img-block" src="img/items/img-sample2.jpg" alt="Image">
</div>
<div class="legend">
<a href="item.html#project_url">
<h3>Fire Cloud</h3>
<h4>Photography / App</h4>
</a>
<div class="icons">
<a class="icon-btn" href="#">
<i class="icon fa fa-instagram"></i>
</a>
<a class="icon-btn" href="#">
<i class="icon fa fa-twitter"></i>
</a>
</div>
</div>
</div>
</li>
<!-- item -->
<li class="slide-item swiper-slide">
<div class="item-wrapper">
<div class="illustr">
<img class="img img-block" src="img/items/img-sample3.jpg" alt="Image">
</div>
<div class="legend">
<a href="item.html#project_url">
<h3>Garden</h3>
<h4>Art / Lifehack</h4>
</a>
<div class="icons">
<a class="icon-btn" href="#">
<i class="icon fa fa-instagram"></i>
</a>
<a class="icon-btn" href="#">
<i class="icon fa fa-twitter"></i>
</a>
</div>
</div>
</div>
</li>
<!-- item -->
<li class="slide-item swiper-slide">
<div class="item-wrapper">
<div class="illustr">
<img class="img img-block" src="img/items/img-sample4.jpg" alt="Image">
</div>
<div class="legend">
<a href="item.html#project_url">
<h3>Sky</h3>
<h4>Photography / Art</h4>
</a>
<div class="icons">
<a class="icon-btn" href="#">
<i class="icon fa fa-instagram"></i>
</a>
<a class="icon-btn" href="#">
<i class="icon fa fa-twitter"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- pagination -->
<div class="items-pagination bar"></div>
<!-- navigation -->
<div class="items-button bottom fit items-button-prev">
<a class="btn btn-transp-arrow btn-primary" href="">
<span class="icon arrow-left"></span>
<span class="text">Prev</span>
</a>
</div>
<div class="items-button bottom fit items-button-next">
<a class="btn btn-transp-arrow btn-primary" href="">
<span class="text">Next</span>
<span class="icon arrow-right"></span>
</a>
</div>
</div>
<!-- end of carousel-swiper-beta -->
</div>
<!-- Arrows scroll down/up -->
<footer class="section-footer scrolldown">
<a class="down">
<span class="icon"></span>
<span class="txt">Products</span>
</a>
</footer>
</div>
<!-- End of slider section -->
To add another slide, dublicate the following li tag within the item-list ul
HTML Navigation menu
<!-- item -->
<li class="slide-item swiper-slide">
<div class="item-wrapper">
<div class="illustr">
<img class="img img-block" src="img/items/img-sample1.jpg" alt="Image">
</div>
<div class="legend">
<a href="item.html#project_url">
<h3>Paper Design</h3>
<h4>Art / Print</h4>
</a>
<div class="icons">
<a class="icon-btn" href="#">
<i class="icon fa fa-instagram"></i>
</a>
<a class="icon-btn" href="#">
<i class="icon fa fa-twitter"></i>
</a>
</div>
</div>
</div>
</li>
Javascript
Within the main.js javascript file, the following code launch the slider (it uses Swiper JS carousel plugin):
Javascript slider
// carousel-beta :projects list slider
new Swiper('.carousel-swiper-beta-demo .swiper-container', {
pagination: '.carousel-swiper-beta-demo .items-pagination',
paginationClickable: '.carousel-beta-demo .items-pagination',
nextButton: '.carousel-swiper-beta-demo .items-button-next',
prevButton: '.carousel-swiper-beta-demo .items-button-prev',
loop: true,
grabCursor: true,
centeredSlides: false,
autoplay: 5000,
autoplayDisableOnInteraction: false,
slidesPerView: 2,
spaceBetween: 0,
breakpoints: {
1024: {
slidesPerView: 2,
},
800: {
slidesPerView: 1,
spaceBetween: 0
},
640: {
slidesPerView: 1,
spaceBetween: 0
},
440: {
slidesPerView: 1,
spaceBetween: 0
}
}
});