Slider - section
This section layout represents a slider showing customers reviews and testimony.
CODE
Here is the HTML code to obtain it. Embed it within the main
tag with class page-main
.
HTML
<div class ="section section-twoside fp-auto-height-responsive bg-white-gray bg-bright" data-section ="slider-reviews" >
<div class ="section-wrapper twoside padding-bottom padding-top" >
<div class ="slider-wrapper carousel-swiper-review carousel-swiper-review-demo" >
<div class ="slider-container swiper-container" >
<ul class ="item-list swiper-wrapper" >
<li class ="slide-item swiper-slide" >
<div class ="item" >
<div class ="section-content center-vh" >
<div class ="title-desc text-center" >
<p class ="anim fadein-top td-2 display-5" > "This Landing page is awesome"</p >
<p class ="anim fadein-top td-3" > Tim Gates, Micromac</p >
</div >
</div >
</div >
</li >
<li class ="slide-item swiper-slide" >
<div class ="item" >
<div class ="section-content center-vh" >
<div class ="title-desc text-center" >
<p class ="anim fadein-top td-2 display-5" > "It saved us a lot of times"</p >
<p class ="anim fadein-top td-3" > Jeff Ma, Alizon</p >
</div >
</div >
</div >
</li >
<li class ="slide-item swiper-slide" data-hash ="App page" >
<div class ="item" >
<div class ="section-content center-vh" >
<div class ="title-desc text-center" >
<p class ="anim fadein-top td-2 display-5" > "We set up our landing page in hour"</p >
<p class ="anim fadein-top td-3" > Dave Johnson, Homecraft</p >
</div >
</div >
</div >
</li >
</ul >
</div >
<div class ="items-pagination" > </div >
</div >
</div >
</div >
To add another slide, duplicate the following li tag within the item-list
ul
HTML Navigation menu
<li class ="slide-item swiper-slide" >
<div class ="item" >
<div class ="section-content center-vh" >
<div class ="title-desc text-center" >
<p class ="anim fadein-top td-2 display-5" > "This Landing page is awesome"</p >
<p class ="anim fadein-top td-3" > Tim Gates, Micromac</p >
</div >
</div >
</div >
</li >
The attribute data-hash="Marketing"
represent the button to navigate to this item.
Javascript
Within the main.js javascript file, the following script runs the slider (it uses Swiper JS carousel plugin):
Javascript slider
new Swiper('.carousel-swiper-review-demo .swiper-container' , {
pagination : '.carousel-swiper-review-demo .items-pagination' ,
paginationClickable : true ,
loop : true ,
grabCursor : true ,
centeredSlides : true ,
autoplay : 5000 ,
autoplayDisableOnInteraction : false ,
slidesPerView : 1 ,
spaceBetween : 0 ,
});
If you want to add another similar slider, use a different class value for carousel-swiper-review-demo
in the Javascript and HTML file for the new slider.