================================================================================
1 OWL SLIDER
================================================================================

    ====OWL SIDER HTML====


<!--OWL-SLIDER CSS-->
    <link rel="stylesheet" type="text/css" href="http://designwithjitender.co.in/project/template/b_c/temp14/css/owl.carousel.min.css" />
    <link rel="stylesheet" type="text/css" href="http://designwithjitender.co.in/project/template/b_c/temp14/css/owl.theme.min.css" />

    <!--OWL-SLIDER JS-->
    <script type="text/javascript" src="http://designwithjitender.co.in/project/template/b_c/temp14/js/owl.carousel.min.js"></script>

    <!-- FLIGHT DEAL -->
    <script>
        $(document).ready(function () {
            $("#divflightdeal").owlCarousel({
                items: 4,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [991, 2],
                itemsTablet: [768, 2],
                itemsMobile: [499, 1],
                pagination: true,
                navigation: true,
                navigationText: ["", ""],
                autoPlay: true,
            });
        });
    </script>
    <!-- FLIGHT DEAL -->

    <div class="owl-slider-full">
        <div id="divflightdeal" class="owl-carousel">
            <div class="owl-slider">
                <div class="pkg-panel">
                    121212
                </div>
            </div>
        </div>
    </div>




================================================================================
2 PARTNER SLIDER
================================================================================

<!-- LIGHT SLIDER -->
    <link rel="stylesheet" type="text/css" href="http://designwithjitender.co.in/project/template/b_c/temp14/css/lightslider.css" />
    <script type="text/javascript" src="http://designwithjitender.co.in/project/template/b_c/temp14/js/lightslider.js"></script>


<!-- PARTNER LOGO -->
    <script>
        $(document).ready(function () {
            $("#divContentSlider").lightSlider({
                loop: true,
                keyPress: true
            });

            $('#divImageGallery').lightSlider({
                gallery: true,
                item: 1,
                thumbItem: 8,
                slideMargin: 0,
                speed: 500,
                auto: true,
                loop: true,
                onSliderLoad: function () {
                    $('#divImageGallery').removeClass('cS-hidden');
                }
            });
        });
    </script>
    <!-- PARTNER LOGO -->

<div class="partner-carousel hidden-xs">
        <div class="product-img">
            <div class="item">
                <ul id="divContentSlider" class="content-slider">
                    <li>
                        <img src="http://designwithjitender.co.in/project/template/b_c/temp14/images/home/partnerlogo/1.jpg" class="img-responsive" alt="" />
                    </li>
                </ul>
            </div>
        </div>
    </div>


================================================================================
3 MULTI IMG SLIDER 1
================================================================================
<!-- LIGHT SLIDER -->
    <link rel="stylesheet" type="text/css" href="http://designwithjitender.co.in/project/template/b_c/temp14/css/lightslider.css" />
    <script type="text/javascript" src="http://designwithjitender.co.in/project/template/b_c/temp14/js/lightslider.js"></script>


<!-- PARTNER LOGO -->
    <script>
        $(document).ready(function () {
            $("#divContentSlider").lightSlider({
                loop: true,
                keyPress: true
            });

            $('#divImageGallery').lightSlider({
                gallery: true,
                item: 1,
                thumbItem: 8,
                slideMargin: 0,
                speed: 500,
                auto: true,
                loop: true,
                onSliderLoad: function () {
                    $('#divImageGallery').removeClass('cS-hidden');
                }
            });
        });
    </script>
    <!-- PARTNER LOGO -->

.product-slider-img1 {width: 100%; float: left;}
.product-slider-img1 .lSSlideWrapper.usingCss ul li{height:400px;}
.product-slider-img1 .lSSlideWrapper.usingCss ul li img{height:100%; width:100%; object-fit: cover;}
.product-slider-img1 .lSPager.lSGallery li{height:50px;}
.product-slider-img1 .lSPager.lSGallery li img{height:100%; width:100%;}

<div class="product-slider-img1 ">
        <div class="item">
            <div class="clearfix">
                <ul id="divImageGallery" class="gallery list-unstyled cS-hidden img-fullwidth">
                    <li id="liImg1" data-thumb="https://designwithjitender.co.in/project/template/uselectholidays22/images/resultpage/hotel/hotel-slider1.jpg">
                        <img id="img1" src="https://designwithjitender.co.in/project/template/uselectholidays22/images/resultpage/hotel/hotel-slider1.jpg" />
                    </li>
                </ul>
            </div>
        </div>
    </div>


================================================================================
4 MULTI IMG SLIDER 2
================================================================================

<!-- MULTI IMG SLIDER 2-->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
    <script type="text/javascript" src="https://designwithjitender.co.in/project/template/uselectholidays22//js/slick.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

    <!-- script -->
    <script>
        $(function () {
            // Card's slider
            var $carousel = $(".slider-for");

            $carousel
                .slick({
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    fade: true,
                    adaptiveHeight: true,
                    asNavFor: ".slider-nav"
                })
                .magnificPopup({
                    type: "image",
                    delegate: "a:not(.slick-cloned)",
                    closeOnContentClick: false,
                    tLoading: "????????...",
                    mainClass: "mfp-zoom-in mfp-img-mobile",
                    image: {
                        verticalFit: true,
                        tError: '<a href="%url%">???? #%curr%</a> ?? ???????????.'
                    },
                    gallery: {
                        enabled: true,
                        navigateByImgClick: true,
                        tCounter: '<span class="mfp-counter">%curr% ?? %total%</span>', // markup of counte
                        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                    },
                    zoom: {
                        enabled: true,
                        duration: 300
                    },
                    removalDelay: 300, //delay removal by X to allow out-animation
                    callbacks: {
                        open: function () {
                            //overwrite default prev + next function. Add timeout for css3 crossfade animation
                            $.magnificPopup.instance.next = function () {
                                var self = this;
                                self.wrap.removeClass("mfp-image-loaded");
                                setTimeout(function () {
                                    $.magnificPopup.proto.next.call(self);
                                }, 120);
                            };
                            $.magnificPopup.instance.prev = function () {
                                var self = this;
                                self.wrap.removeClass("mfp-image-loaded");
                                setTimeout(function () {
                                    $.magnificPopup.proto.prev.call(self);
                                }, 120);
                            };
                            var current = $carousel.slick("slickCurrentSlide");
                            $carousel.magnificPopup("goTo", current);
                        },
                        imageLoadComplete: function () {
                            var self = this;
                            setTimeout(function () {
                                self.wrap.addClass("mfp-image-loaded");
                            }, 16);
                        },
                        beforeClose: function () {
                            $carousel.slick("slickGoTo", parseInt(this.index));
                        }
                    }
                });
            $(".slider-nav").slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                asNavFor: ".slider-for",
                dots: false,
                centerMode: false,
                focusOnSelect: true,
                variableWidth: true
            });
        });

    </script>
    <!-- MULTI IMG SLIDER 2-->

 <style>
        

.product-slider-img2 {width: 100%; float: left;}
.product-slider-img2 .lSSlideWrapper.usingCss ul li{height:400px;}
.product-slider-img2 .lSSlideWrapper.usingCss ul li img{height:100%; width:100%; object-fit: cover;}
.product-slider-img2 .lSPager.lSGallery li{height:50px;}
.product-slider-img2 .lSPager.lSGallery li img{height:100%; width:100%;}

/* CUSTOME CSS FOR LEFT RIGHT BTN */
.product-slider-img2 .lSAction > .lSPrev{border:2px solid #000; float:left; border-radius: 50% !important; left:0px; margin-left:10px; background:#fff !important; position:absolute; top:50%;width:32px;height:32px;opacity:1;}
.product-slider-img2 .lSAction > .lSNext{border:2px solid #000; float:right; border-radius: 50% !important; margin-right:10px; background:#fff !important; position:absolute; top:50%; right:0px;width:32px;height:32px;opacity:1;}
.product-slider-img2 .lSAction > .lSPrev:hover,
.product-slider-img2 .lSAction > .lSNext:hover{background:#eee !important;}
.product-slider-img2 .lSAction > .lSPrev:before, 
.product-slider-img2 .lSAction > .lSNext:before {content: "\f104" !important; top: -5px;position: absolute;left: 8px; font-size: 26px; font-weight: 600; font-family: 'FontAwesome'; color: #000 !important;}
.product-slider-img2 .lSAction > .lSNext:before {content: "\f105" !important; left: inherit; right: 8px;}
/* CUSTOME CSS FOR LEFT RIGHT BTN */

/* on click zoom slider */
.product-slider-img2 .slider-with-popup .item-slick.slick-slide.slick-current.slick-active { outline: none !important;}
.product-slider-img2 .slider-with-popup .slider-for {margin-bottom: 15px;}
.product-slider-img2 .slider-with-popup .slider-for img {width: 100%; height:400px;}
.product-slider-img2 .slider-with-popup .slider-nav {margin: auto;}
.product-slider-img2 .slider-with-popup .slider-nav .item-slick {max-width: 240px; height:130px; margin-right: 15px; outline: none !important; cursor: pointer;}
.product-slider-img2 .slider-with-popup .slider-nav .item-slick img {max-width: 100%;  background-size: cover; background-position: center;}
.product-slider-img2 .slider-with-popup .slick-arrow {position: absolute;top: 50%; z-index: 50; margin-top: -12px;}
.product-slider-img2 .slider-with-popup .slick-prev { left: 10px; outline:none; width: 32px; height: 32px; background: none; background-image: url(../images/icons/controls1.png); border: none; color: #fff;font-size: 16px;}
.product-slider-img2 .slider-with-popup .slick-next {right: 10px; outline:none; width: 32px; height: 32px; background: none; background-position: -32px 0; background-image: url(../images/icons/controls1.png); border: none; color: #fff;font-size: 16px;}
.product-slider-img2 .slider-with-popup .slick-prev{background-image: url(../images/icons/controls1.png);}
.product-slider-img2 .slider-with-popup .slick-next{background-image: url(../images/icons/controls1.png);}

/* CUSTOME CSS FOR LEFT RIGHT BTN */
.product-slider-img2 .slider-with-popup .slick-prev{border:2px solid #000; float:left; border-radius: 50% !important; left:0px; margin-left:10px; background:#fff !important; position:absolute; top:50%;width:32px;height:32px;opacity:1;}
.product-slider-img2 .slider-with-popup .slick-next{border:2px solid #000; float:right; border-radius: 50% !important; margin-right:10px; background:#fff !important; position:absolute; top:50%; right:0px;width:32px;height:32px;opacity:1;}
.product-slider-img2 .slider-with-popup .slick-prev:hover,
.product-slider-img2 .slider-with-popup .slick-next:hover{background:#eee !important;}
.product-slider-img2 .slider-with-popup .slick-prev:before, 
.product-slider-img2 .slider-with-popup .slick-next:before {content: "\f104" !important; top: -5px;position: absolute;left: 8px; font-size: 26px; font-weight: 600; font-family: 'FontAwesome'; color: #000 !important;}
.product-slider-img2 .slider-with-popup .slick-next:before {content: "\f105" !important; left: inherit; right: 8px;}
/* CUSTOME CSS FOR LEFT RIGHT BTN */

.product-slider-img2 .slider-with-popup .mfp-zoom-out-cur, 
.product-slider-img2 .slider-with-popup .mfp-zoom-out-cur .mfp-image-holder .mfp-close:hover {cursor: pointer;}
.product-slider-img2 .slider-with-popup .mfp-container:hover { cursor: default;}
.product-slider-img2 .slider-with-popup .image-source-link { color: #98C3D1;}
.product-slider-img2 .slider-with-popup .mfp-with-zoom.mfp-bg {opacity: 0; transition: all 0.3s ease-out;}
.product-slider-img2 .slider-with-popup .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1;}
.product-slider-img2 .slider-with-popup .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8;}
.product-slider-img2 .slider-with-popup .mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
.product-slider-img2 .slider-with-popup .mfp-wrap ~ * { filter: blur(5px);}
.product-slider-img2 .slider-with-popup .mfp-ready .mfp-figure { opacity: 0;}
.product-slider-img2 .slider-with-popup .mfp-zoom-in .mfp-figure, 
.product-slider-img2 .slider-with-popup .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {opacity: 0; transition: all 0.3s ease-out; transform: scale(0.95);}
.product-slider-img2 .slider-with-popup .mfp-zoom-in .mfp-preloader { opacity: 0;transition: all 0.3s ease-out;}
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-image-loaded .mfp-figure, 
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler {opacity: 1; transform: scale(1);}
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-ready .mfp-preloader {opacity: 0.8;}
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-removing .mfp-figure, 
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler {transform: scale(0.95);opacity: 0;}
.product-slider-img2 .slider-with-popup .mfp-zoom-in.mfp-removing .mfp-preloader {opacity: 0;}
.product-slider-img2 .slider-with-popup .mfp-iframe-scaler {overflow: visible;}
.product-slider-img2 .slider-with-popup .mfp-zoom-out-cur { cursor: auto;}
.product-slider-img2 .slider-with-popup .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer;}
@media screen and (min-width:320px) and (max-width:767px) {
.product-slider-img2 .slider-with-popup .slider-for img {width: 100%; height:auto;}
}

    </style>


<div class="product-slider-img2 ">
                    <div class="slider-with-popup">
                        <div class="slider-for">
                            <a href="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img1.jpg" class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img1.jpg" alt="Alt" /></a>
                            <a href="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img2.jpg" class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img2.jpg" alt="Alt" /></a>
                            <a href="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img3.jpg" class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img3.jpg" alt="Alt" /></a>
                            <a href="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img4.jpg" class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img4.jpg" alt="Alt" /></a>
                            <a href="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img5.jpg" class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img5.jpg" alt="Alt" /></a>
                        </div>
                        <div class="slider-nav">
                            <div class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img1.jpg" alt="Alt" /></div>
                            <div class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img2.jpg" alt="Alt" /></div>
                            <div class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img3.jpg" alt="Alt" /></div>
                            <div class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img4.jpg" alt="Alt" /></div>
                            <div class="item-slick"><img src="https://designwithjitender.co.in/project/template/uselectholidays22/images/hotel-result/hotel-img5.jpg" alt="Alt" /></div>
                        </div>
                    </div>
                </div>