{"id":5071,"date":"2023-12-11T03:21:52","date_gmt":"2023-12-11T03:21:52","guid":{"rendered":"https:\/\/innovat.themewant.com\/?page_id=5071"},"modified":"2024-01-17T03:48:05","modified_gmt":"2024-01-17T03:48:05","slug":"vertical-slider-showcase","status":"publish","type":"page","link":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/vertical-slider-showcase\/","title":{"rendered":"Vertical Slider Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5071\" class=\"elementor elementor-5071\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c4e313 e-con-full e-flex e-con e-parent\" data-id=\"0c4e313\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\r\n\r\n\t\t<div class=\"elementor-element elementor-element-a726d57 elementor-widget elementor-widget-rt-banner-slider\" data-id=\"a726d57\" data-element_type=\"widget\" data-widget_type=\"rt-banner-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\r\n        <div class=\"slider-inner-wrapper rts-banner-slider-style6  rts-banner-slider-wrapper\">\r\n            <div class=\"swiper rt--slider rt-main-slider rts-banner-slider-style6 rt_slider-33067 mySwiper-banner-one-1\">\r\n                 <!-- banner one swiper fade area start -->\r\n                <div class=\"swiper-wrapper\">\r\n                    <div class=\"swiper-slide elementor-repeater-item-f7ed2b5\" f7ed2b5\">\r\n    <!-- rts-banner-area -->\r\n    <div class=\"slider-content-area rts-banner-area-start-one\">\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12\">\r\n                    <div class=\"float-right-content\">\r\n                        <!-- single-swiper-area start -->\r\n                        <div class=\"signle-swiper-start\">\r\n                            <div class=\"thumbnail-banner-one\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-content\/uploads\/sites\/2\/2023\/11\/01.jpg\" alt=\"image\">\r\n                                                            <\/div>\r\n                        <\/div>\r\n                        <!-- single-swiper-area end -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- rts-banner-area end -->\r\n<\/div><div class=\"swiper-slide elementor-repeater-item-64660b4\" 64660b4\">\r\n    <!-- rts-banner-area -->\r\n    <div class=\"slider-content-area rts-banner-area-start-one\">\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12\">\r\n                    <div class=\"float-right-content\">\r\n                        <!-- single-swiper-area start -->\r\n                        <div class=\"signle-swiper-start\">\r\n                            <div class=\"thumbnail-banner-one\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-content\/uploads\/sites\/2\/2023\/11\/23-1.jpg\" alt=\"image\">\r\n                                                            <\/div>\r\n                        <\/div>\r\n                        <!-- single-swiper-area end -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- rts-banner-area end -->\r\n<\/div><div class=\"swiper-slide elementor-repeater-item-68bf08a\" 68bf08a\">\r\n    <!-- rts-banner-area -->\r\n    <div class=\"slider-content-area rts-banner-area-start-one\">\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12\">\r\n                    <div class=\"float-right-content\">\r\n                        <!-- single-swiper-area start -->\r\n                        <div class=\"signle-swiper-start\">\r\n                            <div class=\"thumbnail-banner-one\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-content\/uploads\/sites\/2\/2023\/11\/22.jpg\" alt=\"image\">\r\n                                                            <\/div>\r\n                        <\/div>\r\n                        <!-- single-swiper-area end -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- rts-banner-area end -->\r\n<\/div>                <\/div>\r\n                <!-- banner one swiper fade area end -->\r\n                <!-- Pagination -->\r\n            <div class=\"swiper-pagination\"><\/div>                        <\/div>\r\n                                <div class=\"left-swiper-area-start\">\r\n                        <div class=\"right-shape\">\r\n                            <img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-content\/plugins\/rt-elements\/widgets\/banner-slider\/\/img\/icon\/03.png\" alt=\"\">\r\n                        <\/div>\r\n\r\n                        <!-- single swiper area start -->\r\n                        <div class=\"contents single-left-banner-swiper-start\">\r\n                            <div class=\"swiper mySwiper-banner-oneleft\">\r\n                                <div class=\"swiper-wrapper\">\r\n                                                                                <div class=\"swiper-slide\">\r\n                                                <span class=\"subtitle pre\">\r\n                                                                                                            Interior Design                                                                                                    <\/span>\r\n                                                <h2 class=\"title\">\r\n                                                                                                             Discover Inspired  Interior Designs                                                                                                                                         <\/h3>\r\n                                                <div class=\"disc\">\r\n                                                                                                            <p>We believe that a well-designed space can have a profound impact quality life.<\/p>                                                                                                    <\/div>\r\n                                                <div class=\"animation-55\">\r\n                                                    <a href=\"#\" class=\"rts-btn btn-border\" >View Details<\/a>\r\n                                                <\/div>\r\n                                            <\/div>\r\n                                                                                        <div class=\"swiper-slide\">\r\n                                                <span class=\"subtitle pre\">\r\n                                                                                                            Interior Design                                                                                                    <\/span>\r\n                                                <h2 class=\"title\">\r\n                                                                                                             Elegant Modern Minimalist Charm                                                                                                     <\/h3>\r\n                                                <div class=\"disc\">\r\n                                                                                                            <p>We believe that a well-designed space can have a profound impact quality life.<\/p>                                                                                                    <\/div>\r\n                                                <div class=\"animation-55\">\r\n                                                    <a href=\"#\" class=\"rts-btn btn-border\" >View Details<\/a>\r\n                                                <\/div>\r\n                                            <\/div>\r\n                                                                                        <div class=\"swiper-slide\">\r\n                                                <span class=\"subtitle pre\">\r\n                                                                                                            Interior Design                                                                                                    <\/span>\r\n                                                <h2 class=\"title\">\r\n                                                                                                            Inspire The Best Interior Design                                                                                                    <\/h3>\r\n                                                <div class=\"disc\">\r\n                                                                                                            <p>We believe that a well-designed space can have a profound impact quality life.<\/p>                                                                                                    <\/div>\r\n                                                <div class=\"animation-55\">\r\n                                                    <a href=\"#\" class=\"rts-btn btn-border\" >View Details<\/a>\r\n                                                <\/div>\r\n                                            <\/div>\r\n                                                                                \r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <!-- single swiper area end -->\r\n                    <\/div>\r\n                    <div class=\"pagination-left-banner-one style6-progressbar\">\r\n                        <div class=\"activeslide\">01<\/div>\r\n                        <div class=\"swiper-paginations\"><\/div>\r\n                        <div class=\"totalslide\">03<\/div>\r\n                    <\/div>\r\n\r\n                            \r\n                    <\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n       \r\n\r\n        <script type=\"text\/javascript\">\r\n            jQuery(document).ready(function($) {\r\n\r\n                var sliderThumbnail = new Swiper(\".swiper-banner-thumb\", {\r\n                    slidesPerView: 3,\r\n                    clickable: true,\r\n                });\r\n\r\n                var swiper33067 = new Swiper(\".rt_slider-33067\", {\r\n                    slidesPerView: 1,\r\n                    effect: 'coverflow', coverflowEffect: {rotate: 90, slideShadows: false,},                    speed: 1000,\r\n                    slidesPerGroup: 1,\r\n                    loop: false,\r\n                    autoplay: false,\r\n                    spaceBetween: 30,\r\n                    mousewheel: true,                    keyboard: {\r\n                        enabled: true,\r\n                        onlyInViewport: true,\r\n                        speed: 1000,\r\n                    },\r\n                    pagination: {\r\n                        \r\n                        el: \".swiper-pagination\",\r\n                        clickable: true,\r\n                                            },\r\n                    centeredSlides: false,\r\n                    navigation: {\r\n                        nextEl: \".rts-next33067\",\r\n                        prevEl: \".rts-prev33067\",\r\n                    },\r\n                    breakpoints: {\r\n                        575: { slidesPerView: 1 },767: { slidesPerView: 1 },991: { slidesPerView: 1 },1199: { slidesPerView: 1 },                        1399: {\r\n                            slidesPerView: 1,\r\n                            spaceBetween: 30                        }\r\n                    },\r\n                                    });\r\n                \r\n                                    var sliderTwo = new Swiper(\".mySwiper-banner-oneleft\", {\r\n                        spaceBetween: 0,\r\n                        clickable: true,\r\n                        effect: 'fade',\r\n                        mousewheelControl: true,\r\n                        pagination: {\r\n                        el: \".style6-progressbar .swiper-paginations\",\r\n                        clickable: true,\r\n                        type: 'progressbar',\r\n                        },\r\n                        keyboard: {\r\n                            enabled: true,\r\n                            onlyInViewport: true,\r\n                        },\r\n                        loop: false,\r\n                    });\r\n\r\n                    let sliderOne = swiper33067;\r\n                    \/\/ progress slider\r\n                    \r\n                    sliderTwo.on('slideChange', function () {\r\n                        console.log('slider moved');\r\n                        var activeslide = sliderTwo.realIndex;\r\n                        var totalslide = sliderTwo.slides.length;\r\n                        console.log(activeslide);\r\n                        $(\".style6-progressbar .activeslide\").html(activeslide + 1);\r\n                        $(\".style6-progressbar .totalslide\").html(totalslide);\r\n                    });\r\n\r\n                    sliderOne.controller.control = sliderTwo;\r\n                    sliderTwo.controller.control = sliderOne;\r\n                \r\n            });\r\n        <\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Interior Design Discover Inspired Interior Designs We believe that a well-designed space can have a profound impact quality life. View Details Interior Design Elegant Modern Minimalist Charm We believe that a well-designed space can have a profound impact quality life. View Details Interior Design Inspire The Best Interior Design We believe that a well-designed space&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/pages\/5071"}],"collection":[{"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/comments?post=5071"}],"version-history":[{"count":0,"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/pages\/5071\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewant.com\/products\/wordpress\/innovat\/dark\/wp-json\/wp\/v2\/media?parent=5071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}