1. Adminos
  2. Advance Components
  3. Slider
Bootstrap Slider
Owl Carousel Style 1
Third slide
Third slide
Third slide
Owl Carousel Style 2
Third slide
Third slide
Third slide
Swiper Slider
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
HTML Usage
                                                    
<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-1.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-2.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-3.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-4.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-5.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-6.jpg" alt="Card image cap">
    </div>
    <div class="swiper-slide">
        <img class="img-fluid h-100" src="img/product-detail/pro-d-l-7.jpg" alt="Card image cap">
    </div>
</div>
</div>
Javascript Usage
                                                    
<!-- swiper js -->
<script src="plugins/swiper/js/swiper.min.js"></script>
<script src="plugins/swiper/swiper-custom.js"></script>

<script>
"use strict";
$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 5,
        paginationClickable: true,
        spaceBetween: 20,
        loop: true,
        breakpoints: {
                // when window width is <= 576px
                576: {
                        slidesPerView: 1
                },
                // when window width is <= 992px
                992: {
                        slidesPerView: 2
                },
                // when window width is <= 1200px
                1200: {
                        slidesPerView: 3
                }
        }
    });
});
</script>
Owl Carousel
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Sale
Sweater
Guangzhou Dress
$30.00 $20  (60% OFF)
Html Usage
                                                    
<!-- owl carousel css -->
<link rel="stylesheet" href="plugins/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="plugins/owl-carousel/assets/owl.theme.default.min.css">

<div class="product-slider owl-carousel owl-loaded owl-drag">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="product-item-image"
                            src="img/product/img-3.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price-text">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="product-item-image"
                            src="img/product/img-7.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="product-item-image"
                            src="img/product/p3.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="product-item-image"
                            src="img/product/p4.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="img/product/p1.jpg"
                            src="img/product/p1.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="product-item">
                    <div class="pro-pic">
                        <img class="product-item-image"
                            src="img/product/p2.jpg" alt="">
                        <div class="sale">Sale</div>
                        <a href="#" class="icon"><i
                                class="fa fa-heart-o"></i></a>
                    </div>
                    <div class="pi-text text-center mb-3">
                        <div class="category-name">Sweater</div>
                        <a href="#">
                            <h5>Guangzhou Dress</h5>
                        </a>
                        <div class="product-price">
                            <span class="price">$30.00</span> <span
                                class="line-through"> $20 </span> <span
                                class="offer">(60% OFF)</span>
                        </div>
                    </div>
                    <div class="add-products text-center">
                        <button class="btn btn-add-to-bag btn-sm">ADD TO
                            CART</button>
                        <button
                            class="btn btn-add-to-wishlist btn-sm">WISHLIST</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="owl-nav">
        <button type="button" class="owl-prev">
            <i class="fa fa-angle-left text-white"></i>
        </button>
        <button type="button" class="owl-next">
            <i class="fa fa-angle-right text-white"></i>
        </button>
    </div>
    <div class="owl-dots"></div>
</div>
Javascript Usage
                                                    
<!-- owl carousel 2 js -->
<script src="plugins/owl-carousel/js/owl.carousel.min.js"></script>
<script src="plugins/owl-carousel/owl-custom.js"></script>
<script>
$(".product-slider").owlCarousel({
    loop: true,
    margin: 25,
    nav: true,
    items: 4,
    dots: true,
    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
    smartSpeed: 1200,
    autoHeight: false,
    autoplay: true,
    responsive: {
        0: {
            items: 1,
        },
        576: {
            items: 2,
        },
        992: {
            items: 2,
        },
        1200: {
            items: 3,
        }
    }
});
</script>
© 2019 Adminos By Refinethemes.com