Notifications
Clear All
View All Notification
Welcome Gaston!
Profile Messages Pricing Help Lock screen
Logout
Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Concept.fig
venton.docs
Monday , 4:24 PM
Project Status

Marked Design as Completed

UI/UX Figma Design
Monday , 3:00 PM
UI
Venton Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Download Zip
Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
logo sm logo dark logo sm logo light

Swiper Slider

  1. Extended UI
  2. Swiper Slider
Overview Official Website

Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.

Usage

Swiper Slider's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.

Default Swiper #

Use data-swiper="default" attribute to set a default swiper.

html 
                                                
                                                    <!-- Default Swiper -->
                                                    <div class="swiper rounded" data-swiper="default">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-1.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-2.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                        </div>
                                                    </div>

Use data-swiper="navigation" attribute to set a swiper with navigation and pagination.

html 
                                                
                                                    <!-- Navigation & Pagination Swiper -->
                                                    <div class="swiper rounded" data-swiper="navigation">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-button-next"></div>
                                                        <div class="swiper-button-prev"></div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Pagination Dynamic Swiper #

Use data-swiper="dynamic" attribute to set a swiper with dynamic and pagination.

html 
                                                
                                                    <!-- Pagination Dynamic Swiper -->
                                                    <div class="swiper rounded" data-swiper="dynamic">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination dynamic-pagination"></div>
                                                    </div>
Effect Fade Swiper #

Use data-swiper="effect-fade" attribute to set a swiper with fade effect.

html 
                                                
                                                    <!-- Effect Fade Swiper -->
                                                    <div class="swiper rounded" data-swiper="effect-fade">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Effect Creative Swiper #

Use data-swiper="creative" attribute to set a swiper with creative custom effect.

html 
                                                
                                                    <!-- Effect Creative Swiper -->
                                                    <div class="swiper" data-swiper="creative">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Effect Flip Swiper #

Use data-swiper="flip" attribute to set a swiper with flip custom effect.

html 
                                                
                                                    <!-- Effect Flip Swiper -->
                                                    <div class="swiper" data-swiper="flip">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Scrollbar Swiper #

Use data-swiper="scrollbar" attribute to set a swiper with scrollbar pagination.

html 
                                                
                                                    <!-- Scrollbar Swiper Swiper -->
                                                    <div class="swiper" data-swiper="scrollbar">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-button-next"></div>
                                                        <div class="swiper-button-prev"></div>
                                                        <div class="swiper-scrollbar"></div>
                                                    </div>
Vertical Swiper #

Use data-swiper="vertical" attribute to set a swiper with vertical pagination.

html 
                                                
                                                    <!-- Vertical Swiper -->
                                                    <div class="swiper" data-swiper="vertical" style="height: 320px;">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Mousewheel Control Swiper #

Use data-swiper="mousewheel" attribute to set a swiper with mousewheel scroll.

html 
                                                
                                                    <!-- Mousewheels Swiper -->
                                                    <div class="swiper rounded" data-swiper="mousewheel" style="height: 324px;">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination"></div>
                                                    </div>
Responsive Breakpoints Swiper #

Use data-swiper="responsive" attribute to set a responsive swiper.

html 
                                                
                                                    <!-- Responsive Breakpoints Swiper -->
                                                    <div class="swiper rounded gallery-light pb-4" data-swiper="responsive">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-1.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-2.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <img src="assets/images/small/img-6.jpg" alt="" class="img-fluid rounded" />
                                                            </div>
                                                        </div>
                                                        <div class="swiper-pagination swiper-pagination-dark"></div>
                                                    </div>
© Venton. Crafted by Techzaa