Advanced Slider and carousel

Blog Staff

May 4, 2022

Slider/Carousel Block is universal customizable block which can be used to slide anything – from simple images to complex inner blocks. In this page we show some examples for sliders with 1 item per slide, you can place any other blocks or complex groups inside each slide.

Slider with inner blocksIt has also custom Slider effect

Slider with image backgroundThis slider has also custom arrow buttons, scrollbar and custom sliding effect

Slider as Cards EffectIt has also inner block with buttons as Card

Vertical Slider Orientation + full widthYou can change orientation of slider

Full visible items for sliderAlso, this example has Scale effect

Full visible items for slider + custom effectAlso, this example has Scale effect

You can also add custom control to slider. For this, place custom elements in the same row as slider and add classes: gs-slider-control-btn gs-slideto-2. This will trigger second slide and class “active” to your control element

First slide

Second Slide

For time saving, you can also easily convert regular Core gallery to slider. See how it works in video

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

</p> <p>Slider/Carousel Block is universal customizable block which can be used to slide anything – from simple images to complex inner blocks. In this page we show some examples for sliders with 1 item per slide, you can place any other blocks or complex groups inside each slide.</p> <div class="gspb_heading_sep_gsbp-2a45fae9-3d66"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>1</span></div> </div> <h2 id="gspb_heading-id-gsbp-2a45fae9-3d66" class="gspb_heading gspb_heading-id-gsbp-2a45fae9-3d66 ">Slider with inner blocks<span class="gspb_heading_subtitle">It has also custom Slider effect</span></h2> </div> <div class="wp-block-greenshift-blocks-swiper gs-swiper gspb_slider-id-gsbp-8c70b46b-f420 wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="500" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="creative" data-coverflowshadow="false" data-customparams="{"prev":{"translateX":"0px","translateY":"0px","translateZ":"-300px","rotateX":0,"rotateY":0,"rotateZ":0,"opacity":1,"shadow":false,"scale":1,"origin":""},"next":{"translateX":"100%","translateY":"0px","translateZ":"0px","rotateX":0,"rotateY":0,"rotateZ":0,"opacity":1,"shadow":false,"scale":1,"origin":""}}"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-size:contain;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div> <div id="gspb_id-gsbp-62af01ad-6841" class="gspb-offer-box gspb_id-gsbp-62af01ad-6841 " itemtype="http://schema.org/Product" itemscope> <style scoped>#gspb_id-gsbp-62af01ad-6841 .gspb-c-offer-box__stars{--star-color: #fdfdfd;--star-background: #fc0;--rating: 5; --percent: calc(var(--rating) / 5 * 100%);display: inline-block;font-size: 30px;font-family: Times;line-height: 1;letter-spacing: 0.5px;margin-bottom: 10px;-webkit-text-stroke-width: 0.8px; -webkit-text-stroke-color: #ffbf00;}#gspb_id-gsbp-62af01ad-6841 .gspb-c-offer-box__stars::before {content: "★★★★★";letter-spacing: 3px;background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style> <p> <meta itemprop="mpn" content="12345" /><br /> <meta itemprop="sku" content="010-02157-00" /> <link itemprop="image" href="https://static.garmincdn.com/en/products/010-02157-00/v/cf-lg-ecea6607-4328-4761-be0b-cb997234b58b.jpg" /> <div class="gspb-c-offer-box__wrapper"> <div class="gspb-c-offer-box__column gspb-c-offer-box__column--image"> <div class='gspb-c-offer-box__image'> <img decoding="async" src="https://static.garmincdn.com/en/products/010-02157-00/v/cf-lg-ecea6607-4328-4761-be0b-cb997234b58b.jpg" class="attachment-full size-full" alt="" loading="lazy" > </div> </p> </div> <div class="gspb-c-offer-box__column"> <h3 class="gspb-c-offer-box__title"> <p> <span itemprop="name">Fēnix 6X smartwatch – Pro and Sapphire Editions Black with Black Band and sport health functions</span></p> </h3> <div aria-label="Rating is 5 of 5" class="gspb-c-offer-box__stars" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope> <meta itemprop="reviewCount" content="5" /><br /> <meta itemprop="ratingValue" content="5" /> </div> <div class="gspb-c-offer-box__price"> <span>US$699.99</span><br /> <span class="retail-old"><strike>US$799.99</strike></span> </div> <div class="gspb-c-offer-box__disclaimer"> <span>Find actual price at Garmin.com</span> </div> <div class="priced_block" itemprop="offers" itemtype="http://schema.org/Offer" itemscope> <meta itemprop="availability" content="https://schema.org/InStock" /><br /> <meta itemprop="priceCurrency" content="USD" /><br /> <meta itemprop="itemCondition" content="https://schema.org/NewCondition" /><br /> <meta itemprop="price" content="0" /></p> <div> <a class="gspb_track_btn re_track_btn gspb_offer_block" href="https://buy.garmin.com/en-US/US/p/641435" target="_blank" rel="nofollow sponsored" itemprop="url"><br /> Buy this item </a> </div> </p> </div> <div class="gspb-c-offer-box__desc"> <span itemprop="description">fenix® 6X – Pro & Sapphire Editions is a GPS Smartwatch with music, Pulse Ox & Dynamic PacePro, a feature that helps you run smarter over diff…</span> </div> <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope> <meta itemprop="name" content="Garmin" /> </div> </p> </div> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-size:contain;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div> <div id="gspb_id-gsbp-79a471d9-35d1" class="gspb-offer-box gspb_id-gsbp-79a471d9-35d1 " itemtype="http://schema.org/Product" itemscope> <style scoped>#gspb_id-gsbp-79a471d9-35d1 .gspb-c-offer-box__stars{--star-color: #fdfdfd;--star-background: #fc0;--rating: 5; --percent: calc(var(--rating) / 5 * 100%);display: inline-block;font-size: 30px;font-family: Times;line-height: 1;letter-spacing: 0.5px;margin-bottom: 10px;-webkit-text-stroke-width: 0.8px; -webkit-text-stroke-color: #ffbf00;}#gspb_id-gsbp-79a471d9-35d1 .gspb-c-offer-box__stars::before {content: "★★★★★";letter-spacing: 3px;background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style> <p> <meta itemprop="mpn" content="12345" /><br /> <meta itemprop="sku" content="010-02408-00" /> <link itemprop="image" href="https://static.garmincdn.com/en/products/010-02408-00/v/cf-lg-04000e87-146f-479c-a0d1-5fb2546242ff.jpg" /> <div class="gspb-c-offer-box__wrapper"> <div class="gspb-c-offer-box__column gspb-c-offer-box__column--image"> <div class='gspb-c-offer-box__image'> <img decoding="async" src="https://static.garmincdn.com/en/products/010-02408-00/v/cf-lg-04000e87-146f-479c-a0d1-5fb2546242ff.jpg" class="attachment-full size-full" alt="" loading="lazy" > </div> </p> </div> <div class="gspb-c-offer-box__column"> <h3 class="gspb-c-offer-box__title"> <p> <span itemprop="name">Enduro smartwatches</span></p> </h3> <div aria-label="Rating is 5 of 5" class="gspb-c-offer-box__stars" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope> <meta itemprop="reviewCount" content="5" /><br /> <meta itemprop="ratingValue" content="5" /> </div> <div class="gspb-c-offer-box__price"> <span>US$799.99</span><br /> <span class="retail-old"><strike></strike></span> </div> <div class="gspb-c-offer-box__disclaimer"> <span>Find actual price at Garmin.com</span> </div> <div class="priced_block" itemprop="offers" itemtype="http://schema.org/Offer" itemscope> <meta itemprop="availability" content="https://schema.org/InStock" /><br /> <meta itemprop="priceCurrency" content="USD" /><br /> <meta itemprop="itemCondition" content="https://schema.org/NewCondition" /><br /> <meta itemprop="price" content="0" /></p> <div> <a class="gspb_track_btn re_track_btn gspb_offer_block" href="https://buy.garmin.com/en-US/US/p/702797" target="_blank" rel="nofollow sponsored" itemprop="url"><br /> Buy this item </a> </div> </p> </div> <div class="gspb-c-offer-box__desc"> <span itemprop="description">Garmin Enduro™ features a Power Glass™ solar charging lens that extends battery life, lightweight nylon strap, and other performance features built fo…</span> </div> <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope> <meta itemprop="name" content="Garmin" /> </div> </p> </div> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-size:contain;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div> <div id="gspb_id-gsbp-fdabbc0e-6c9d" class="gspb-offer-box gspb_id-gsbp-fdabbc0e-6c9d " itemtype="http://schema.org/Product" itemscope> <style scoped>#gspb_id-gsbp-fdabbc0e-6c9d .gspb-c-offer-box__stars{--star-color: #fdfdfd;--star-background: #fc0;--rating: 5; --percent: calc(var(--rating) / 5 * 100%);display: inline-block;font-size: 30px;font-family: Times;line-height: 1;letter-spacing: 0.5px;margin-bottom: 10px;-webkit-text-stroke-width: 0.8px; -webkit-text-stroke-color: #ffbf00;}#gspb_id-gsbp-fdabbc0e-6c9d .gspb-c-offer-box__stars::before {content: "★★★★★";letter-spacing: 3px;background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style> <p> <meta itemprop="mpn" content="12345" /><br /> <meta itemprop="sku" content="010-02293-19" /> <link itemprop="image" href="https://static.garmincdn.com/en/products/010-02293-19/v/cf-lg-9edd271d-7b6b-4f52-8270-537de432c14e.jpg" /> <div class="gspb-c-offer-box__wrapper"> <div class="gspb-c-offer-box__column gspb-c-offer-box__column--image"> <div class='gspb-c-offer-box__image'> <img decoding="async" src="https://static.garmincdn.com/en/products/010-02293-19/v/cf-lg-9edd271d-7b6b-4f52-8270-537de432c14e.jpg" class="attachment-full size-full" alt="" loading="lazy" > </div> </p> </div> <div class="gspb-c-offer-box__column"> <h3 class="gspb-c-offer-box__title"> <p> <span itemprop="name">Instinct® Solar</span></p> </h3> <div aria-label="Rating is 5 of 5" class="gspb-c-offer-box__stars" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope> <meta itemprop="reviewCount" content="5" /><br /> <meta itemprop="ratingValue" content="5" /> </div> <div class="gspb-c-offer-box__price"> <span>US$399.99</span><br /> <span class="retail-old"><strike></strike></span> </div> <div class="gspb-c-offer-box__disclaimer"> <span>Find actual price at Garmin.com</span> </div> <div class="priced_block" itemprop="offers" itemtype="http://schema.org/Offer" itemscope> <meta itemprop="availability" content="https://schema.org/InStock" /><br /> <meta itemprop="priceCurrency" content="USD" /><br /> <meta itemprop="itemCondition" content="https://schema.org/NewCondition" /><br /> <meta itemprop="price" content="0" /></p> <div> <a class="gspb_track_btn re_track_btn gspb_offer_block" href="https://buy.garmin.com/en-US/US/p/679335/pn/010-02293-19" target="_blank" rel="nofollow sponsored" itemprop="url"><br /> Buy this item </a> </div> </p> </div> <div class="gspb-c-offer-box__desc"> <span itemprop="description">Instinct Solar is a smartwatch built to conquer the elements featuring a solar charging lens, GPS/GLONASS/GALILEO, and built-in training apps.</span> </div> <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope> <meta itemprop="name" content="Garmin" /> </div> </p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> <div class="gspb_heading_sep_gsbp-6a0fc6ba-fe6f"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>2</span></div> </div> <h2 id="gspb_heading-id-gsbp-6a0fc6ba-fe6f" class="gspb_heading gspb_heading-id-gsbp-6a0fc6ba-fe6f ">Slider with image background<span class="gspb_heading_subtitle">This slider has also custom arrow buttons, scrollbar and custom sliding effect</span></h2> </div> <div class="wp-block-greenshift-blocks-swiper alignwide gs-swiper gspb_slider-id-gsbp-b384fe22-26fc wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="600" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="true" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="creative" data-coverflowshadow="false" data-customparams="{"prev":{"translateX":"0px","translateY":"0px","translateZ":"-300px","rotateX":0,"rotateY":0,"rotateZ":0,"opacity":1,"shadow":false,"scale":0.3,"origin":""},"next":{"translateX":"100%","translateY":"0px","translateZ":"0px","rotateX":0,"rotateY":0,"rotateZ":60,"opacity":1,"shadow":false,"scale":1,"origin":""}}"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/iph.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="say-hello-to-greenshift-sliders" style="font-size:40px;line-height:1.3">Say Hello to Greenshift Sliders</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/game.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="unlimited-possibilities-for-slider" style="font-size:40px;line-height:1.2">Unlimited possibilities for slider</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/fold.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="best-design-and-options" style="font-size:40px;line-height:1">Best design and options</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> <div class="gspb_heading_sep_gsbp-d6bacdce-9a07"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>3</span></div> </div> <h2 id="gspb_heading-id-gsbp-d6bacdce-9a07" class="gspb_heading gspb_heading-id-gsbp-d6bacdce-9a07 ">Slider as Cards Effect<span class="gspb_heading_subtitle">It has also inner block with buttons as Card</span></h2> </div> <div class="wp-block-greenshift-blocks-swiper gs-swiper gspb_slider-id-gsbp-b21a75ce-ec6e wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="400" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="cards" data-coverflowshadow="false"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/CARD.jpeg);background-size:cover;background-position:0% 12%;display:block;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.2;top:0;left:0;right:0;bottom:0;position:absolute"></div> <div style="z-index:2;position:relative"> <div class="wp-block-columns is-layout-flex wp-container-29"> <div class="wp-block-column is-layout-flow"> <h2 class="wp-block-heading" id="best-accessories-for-this-summer" style="font-size:35px;line-height:1.3"><strong>Best Accessories for this summer</strong></h2> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-text-color" style="color:#828282;font-size:15px">Bags & Acsessories &<br />Lingerie & Sportswear &<br />Beauty & Swimwear</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-layout-flex"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-vivid-red-background-color has-text-color has-background wp-element-button">Buy Now</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> <div class="wp-block-column is-layout-flow"></div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/CARD2.jpeg);background-color:#f4f4f4;background-size:contain;background-position:100% 60%;display:block;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.5;top:0;left:0;right:0;bottom:0;position:absolute"></div> <div style="z-index:2;position:relative"> <div class="wp-block-columns is-layout-flex wp-container-33"> <div class="wp-block-column is-layout-flow"> <h2 class="wp-block-heading" id="best-accessories-for-this-summer" style="font-size:35px;line-height:1.3"><strong>Best Accessories for this summer</strong></h2> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-text-color" style="color:#7d7d7d">Bags & Acsessories &<br />Lingerie & Sportswear &<br />Beauty & Swimwear</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-layout-flex"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-vivid-green-cyan-background-color has-text-color has-background wp-element-button">Buy Now</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> <div class="wp-block-column is-layout-flow"></div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/cat-7.jpeg);background-color:#d8e5ed;background-size:contain;background-position:100% 60%;display:block;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.5;top:0;left:0;right:0;bottom:0;position:absolute"></div> <div style="z-index:2;position:relative"> <div class="wp-block-columns is-layout-flex wp-container-37"> <div class="wp-block-column is-layout-flow"> <h2 class="wp-block-heading" id="best-accessories-for-this-summer" style="font-size:35px;line-height:1.3"><strong>Best Accessories for this summer</strong></h2> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <p class="has-text-color" style="color:#828282;font-size:15px">Bags & Acsessories & Lingerie & Sportswear & Beauty & Swimwear</p> <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-layout-flex"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-luminous-vivid-orange-background-color has-text-color has-background wp-element-button">Buy Now</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> <div class="wp-block-column is-layout-flow"></div> </div> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> <div class="gspb_heading_sep_gsbp-448558f9-9292"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>4</span></div> </div> <h2 id="gspb_heading-id-gsbp-448558f9-9292" class="gspb_heading gspb_heading-id-gsbp-448558f9-9292 ">Vertical Slider Orientation + full width<span class="gspb_heading_subtitle">You can change orientation of slider</span></h2> </div> <div class="wp-block-greenshift-blocks-swiper alignfull gs-swiper gspb_slider-id-gsbp-3185d058-3516 wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="600" data-loop="false" data-vertical="true" data-verticalheight="500px" data-autoheight="false" data-grabcursor="true" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="scale" data-coverflowshadow="false"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/slider-image-11.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="say-hello-greenshift-sliders" style="font-size:60px;line-height:1.3">Say Hello Greenshift Sliders</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-38"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-vivid-green-cyan-background-color has-text-color has-background wp-element-button">Buy Greenshift</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/game.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="unlimited-possibilities-for-slider-1" style="font-size:40px;line-height:1.3">Unlimited possibilities for slider</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/fold.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="best-design-and-options-1" style="font-size:40px;line-height:1.3">Best design and options</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> <div class="gspb_heading_sep_gsbp-6fa56367-1ab8"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>5</span></div> </div> <h2 id="gspb_heading-id-gsbp-6fa56367-1ab8" class="gspb_heading gspb_heading-id-gsbp-6fa56367-1ab8 ">Full visible items for slider<span class="gspb_heading_subtitle">Also, this example has Scale effect</span></h2> </div> <div class="wp-block-greenshift-blocks-swiper alignwide gs-swiper gspb_slider-id-gsbp-6d472e73-48e4 wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="600" data-loop="true" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="true" data-freemode="false" data-centered="true" data-autoplay="false" data-autodelay="4000" data-effect="scale" data-coverflowshadow="false"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/slider-image-12.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="say-hello-to-gutencon-sliders-1" style="font-size:45px;line-height:1.3">Say Hello to Greenshift Sliders</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-39"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-vivid-green-cyan-background-color has-text-color has-background wp-element-button">Buy Greenshift</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/game.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="unlimited-possibilities-for-slider-2" style="font-size:40px;line-height:1.3">Unlimited possibilities for slider</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/fold.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="best-design-and-options-2" style="font-size:40px;line-height:1">Best design and options</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> <div class="gspb_heading_sep_gsbp-e4c6bcc5-f75d"> <div class="gspb_heading_sep gspb_heading_sep_before"> <div class="gs-numhead__circle"><span>6</span></div> </div> <h2 id="gspb_heading-id-gsbp-e4c6bcc5-f75d" class="gspb_heading gspb_heading-id-gsbp-e4c6bcc5-f75d ">Full visible items for slider + custom effect<span class="gspb_heading_subtitle">Also, this example has Scale effect</span></h2> </div> <div id="gspb_infoBox-id-gsbp-2ccaeb3d-8745" class="gspb_infoBox gspb_infoBox-id-gsbp-2ccaeb3d-8745 wp-block-greenshift-blocks-infobox"> <div class="gs-box info_type icon_type"> <div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div> <div class="gs-box-text"> <p>You can also add custom control to slider. For this, place custom elements in the same row as slider and add classes: gs-slider-control-btn gs-slideto-2. This will trigger second slide and class “active” to your control element</p> </div> </div> </div> <div id="gspb_row-id-gsbp-68952fc9-22aa" class="gspb_row gspb_row-id-gsbp-68952fc9-22aa wp-block-greenshift-blocks-row alignfull gspb_row-id-gsbp-68952fc9-22aa"> <div class="gspb_row__content"> <div id="gspb_col-id-gsbp-70c0a3b9-87d5" class="gspb_row__col--12 wp-block-greenshift-blocks-row-column gspb_col-id-gsbp-70c0a3b9-87d5"> <div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-40" style="margin-bottom:50px"> <div class="wp-block-button is-style-cubebtnwhite gs-slider-control-btn gs-slideto-1"><a class="wp-block-button__link wp-element-button">First slide</a></div> <style scoped>.is-style-cubebtnwhite .wp-block-button__link{border:none !important; box-shadow: 0px 2px 4px rgb(45 35 66 / 10%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7}.is-style-cubebtnwhite .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtnwhite .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> <div class="wp-block-button is-style-cubebtnwhite gs-slider-control-btn gs-slideto-2"><a class="wp-block-button__link wp-element-button">Second Slide</a></div> <style scoped>.is-style-cubebtnwhite .wp-block-button__link{border:none !important; box-shadow: 0px 2px 4px rgb(45 35 66 / 10%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7}.is-style-cubebtnwhite .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtnwhite .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> <div class="wp-block-greenshift-blocks-swiper alignwide gs-swiper gspb_slider-id-gsbp-e0180e94-7d6d wp-block-greenshift-blocks-swipe" style="position:relative"> <div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="600" data-loop="true" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="true" data-freemode="false" data-centered="true" data-autoplay="false" data-autodelay="4000" data-effect="creative" data-coverflowshadow="false" data-customparams="{"prev":{"translateX":"-100%","translateY":"0px","translateZ":"-300px","rotateX":0,"rotateY":30,"rotateZ":0,"opacity":1,"shadow":false,"scale":1,"origin":""},"next":{"translateX":"100%","translateY":"0px","translateZ":"-300px","rotateX":0,"rotateY":-30,"rotateZ":0,"opacity":1,"shadow":false,"scale":1,"origin":""}}"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/slider-image-11.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="say-hello-to-gutencon-sliders-2" style="font-size:50px;line-height:1.3">Say Hello to Greenshift Sliders</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-41"> <div class="wp-block-button is-style-cubebtndark"><a class="wp-block-button__link has-textonprimary-color has-vivid-green-cyan-background-color has-text-color has-background wp-element-button">Buy Greenshift</a></div> <style scoped>.is-style-cubebtndark .wp-block-button__link{border:none !important;box-shadow: 0px 2px 4px rgb(45 35 66 / 20%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%); text-shadow: 0 1px 0 rgb(0 0 0 / 40%);}.is-style-cubebtndark .wp-block-button__link:hover{transform: translateY(-2px);}.is-style-cubebtndark .wp-block-button__link:active{transform: translateY(2px);box-shadow: 0px 2px 2px rgb(45 35 66 / 15%)}</style> </div> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/game.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="unlimited-possibilities-for-slider-3" style="font-size:40px;line-height:1.3">Unlimited possibilities for slider</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> <div class="swiper-slide"> <div class="wp-block-greenshift-blocks-swipe swiper-slide-inner" style="background-image:url(https://greenshiftwp.com/wp-content/uploads/2022/05/fold.jpeg);background-size:cover;background-position:;display:flex;box-sizing:border-box;background-repeat:no-repeat"> <div class="slider-overlaybg" style="opacity:0.6;top:0;left:0;right:0;bottom:0;position:absolute;background-image:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"></div> <div style="z-index:2;position:relative"> <h2 class="has-text-align-center has-white-color has-text-color wp-block-heading" id="best-design-and-options-3" style="font-size:40px;line-height:1">Best design and options</h2> <p class="has-text-align-center has-white-color has-text-color has-medium-font-size">Make custom sliders faster with better design</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div> </div> </div> </div> </div> <p>For time saving, you can also easily convert regular Core gallery to slider. See how it works in video</p> <figure class="wp-block-video"><video autoplay controls loop muted src="https://greenshiftwp.com/wp-content/uploads/2022/05/galleryconvert.mp4" playsinline></video></figure> <p>

One response to “Advanced Slider and carousel”

Milano says:

August 30, 2022 at 6:25 pm

This is incredible! It’s amazingly easiest than other builders!!