uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Advanced Slider (Basic) - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Advanced Slider (Basic)</h3> <p>If you want to modify the transition-duration property, please directly modify the <code>.uix-advanced-slider__item</code> in the CSS file. It is not on the <code>data-</code> attribute of the HTML tag.</p> <hr> </div> </div>  </div>  </section>  <div role="banner" class="uix-advanced-slider__wrapper"> <div class="uix-advanced-slider__outline uix-advanced-slider uix-advanced-slider--eff-scale" data-draggable="false" data-draggable-cursor="move" data-auto="true" data-loop="true" data-timing="10000" data-count-total="false" data-count-now="false" data-controls-pagination=".my-a-slider-pagination-1" data-controls-arrows=".my-a-slider-arrows-1"> <div class="uix-advanced-slider__inner"> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-1.jpg" alt="Title 1" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Beautiful Free & Premium Responsive WordPress Themes</h3> <p>Uix Responsive Web UI Frameworks</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-2.jpg" alt="Title 2" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Hello World</h3> <p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-3.jpg" alt="Title 3" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Title 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="uix-advanced-slider__item"> <div class="uix-video__slider" data-embed-video-width="auto" data-embed-video-height="auto" data-embed-video-controls="false" data-embed-video-autoplay="true" data-embed-video-loop="false"> <video id="video-demo-1" class="video-js vjs-default-skin" controls poster="assets/videos/1440x1050/demo.jpg"> <source src="assets/videos/1440x1050/demo.mp4" type="video/mp4"> </video> </div> </div> </div>  </div>  </div>  <div class="uix-advanced-slider__pagination my-a-slider-pagination-1"></div> <div class="uix-advanced-slider__arrows my-a-slider-arrows-1"> <a href="#" class="uix-advanced-slider__arrows--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a> <a href="#" class="uix-advanced-slider__arrows--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> </div>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Sliding Effect</h3> <p>All effects are controlled by CSS styles.</p> <hr> </div> </div>  </div>  </section>  <div role="banner" class="uix-advanced-slider__wrapper"> <div class="uix-advanced-slider__outline uix-advanced-slider uix-advanced-slider--eff-slide" data-draggable="false" data-draggable-cursor="move" data-auto="false" data-loop="false" data-timing="10000" data-count-total="false" data-count-now="false" data-controls-pagination=".my-a-slider-pagination-2" data-controls-arrows=".my-a-slider-arrows-2"> <div class="uix-advanced-slider__inner"> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-1.jpg" alt="Title 1" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Beautiful Free & Premium Responsive WordPress Themes</h3> <p>Uix Responsive Web UI Frameworks</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-2.jpg" alt="Title 2" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Hello World</h3> <p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-3.jpg" alt="Title 3" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Title 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>  </div>  </div>  <div class="uix-advanced-slider__pagination my-a-slider-pagination-2"></div> <div class="uix-advanced-slider__arrows my-a-slider-arrows-2"> <a href="#" class="uix-advanced-slider__arrows--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a> <a href="#" class="uix-advanced-slider__arrows--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> </div>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Fade Effect</h3> <p>All effects are controlled by CSS styles.</p> <hr> </div> </div>  </div>  </section>  <div role="banner" class="uix-advanced-slider__wrapper"> <div class="uix-advanced-slider__outline uix-advanced-slider uix-advanced-slider--eff-none" data-draggable="true" data-draggable-cursor="move" data-auto="false" data-loop="false" data-timing="10000" data-count-total="false" data-count-now="false" data-controls-pagination=".my-a-slider-pagination-3" data-controls-arrows=".my-a-slider-arrows-3"> <div class="uix-advanced-slider__inner"> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-1.jpg" alt="Title 1" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Beautiful Free & Premium Responsive WordPress Themes</h3> <p>Uix Responsive Web UI Frameworks</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-2.jpg" alt="Title 2" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Hello World</h3> <p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Link To</a> </div> </div> </div> <div class="uix-advanced-slider__item"> <img src="assets/images/demo/cool-slider-3.jpg" alt="Title 3" /> <div class="uix-advanced-slider__txt"> <div class="uix-core-grid__col-7 uix-typo--color-white"> <h3>Title 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>  </div>  </div>  <div class="uix-advanced-slider__pagination my-a-slider-pagination-3"></div> <div class="uix-advanced-slider__arrows my-a-slider-arrows-3"> <a href="#" class="uix-advanced-slider__arrows--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a> <a href="#" class="uix-advanced-slider__arrows--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> </div> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')