Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to add carousel control for image gallery

  • hi
    https://prnt.sc/xtQwznvNCuWU
    i added the carousel of image gallery, how to add the carousel contro for this section

    pls guide, thanks

    paul

  • Hi there,

    Select the Carousel block, then click the Add Navigation Controls option on the toolbar:
    https://cln.sh/ZX4PR8JpXb2RNlW0kjNl

  • yes yes

    added

    but i found arrow control

    I want to have the arrows centered vertically. How to change it? pls help, thankks

  • Hi.

    Click the three dots at the top right of the page and switch to Code editor. Copy the following code and paste it in your page. Switch back to Visual editor to view the block.

    Switching between Code and Visual editor

    <!-- wp:generateblocks-pro/carousel {"uniqueId":"34e191f1","styles":{"\u002d\u002dgb-carousel-slides-per-view":"4","\u002d\u002dgb-carousel-slide-gap":"20px","position":"relative"},"css":".gb-carousel-34e191f1{\u002d\u002dgb-carousel-slide-gap:20px;\u002d\u002dgb-carousel-slides-per-view:4;position:relative}","tagName":"div","htmlAttributes":{"data-slides-per-view":"4","data-space-between":"20px","data-loop":"true"}} -->
    <div class="gb-carousel gb-carousel-34e191f1" data-slides-per-view="4" data-space-between="20px" data-loop="true" data-carousel-id="34e191f1"><!-- wp:generateblocks-pro/carousel-items {"uniqueId":"86e8d4c6","tagName":"div"} -->
    <div class="gb-carousel-items"><!-- wp:generateblocks-pro/carousel-item {"uniqueId":"b16d8901","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"8844ca5a","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-8844ca5a{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-8844ca5a" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"372291dc","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"a81e3241","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-a81e3241{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-a81e3241" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"c2aeddac","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"b0a6c7fb","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-b0a6c7fb{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-b0a6c7fb" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"281bd753","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"96f1f421","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-96f1f421{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-96f1f421" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"2d8bae06","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"69dc7998","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-69dc7998{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-69dc7998" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"7e83d980","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"27df7979","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-27df7979{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-27df7979" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"2bdff44f","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"83e1ad98","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-83e1ad98{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-83e1ad98" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item -->
    
    <!-- wp:generateblocks-pro/carousel-item {"uniqueId":"a0d2e5d1","tagName":"div"} -->
    <div class="gb-carousel-item"><!-- wp:generateblocks/media {"uniqueId":"76364115","tagName":"img","styles":{"height":"300px","maxWidth":"100%","objectFit":"cover","width":"100%","display":"block","borderTopLeftRadius":"8px","borderTopRightRadius":"8px","borderBottomRightRadius":"8px","borderBottomLeftRadius":"8px"},"css":".gb-media-76364115{display:block;height:300px;max-width:100%;object-fit:cover;width:100%;border-radius:8px}","htmlAttributes":{"alt":"","title":"11","src":"/wp-content/uploads/2026/01/11.jpg"}} -->
    <img class="gb-media-76364115" alt="" title="11" src="/wp-content/uploads/2026/01/11.jpg"/>
    <!-- /wp:generateblocks/media --></div>
    <!-- /wp:generateblocks-pro/carousel-item --></div>
    <!-- /wp:generateblocks-pro/carousel-items -->
    
    <!-- wp:generateblocks/element {"uniqueId":"0683d341","tagName":"div","styles":{"position":"absolute","top":"50%","left":"20px","transform":"translateY(-50%)","zIndex":"10"},"css":".gb-element-0683d341{left:20px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}"} -->
    <div class="gb-element-0683d341"><!-- wp:generateblocks-pro/carousel-control {"uniqueId":"fb00db15","controlType":"previous","iconOnly":true,"tagName":"button","htmlAttributes":{"data-carousel-control":"prev"},"styles":{"display":"flex","alignItems":"center","justifyContent":"center","width":"48px","height":"48px","backgroundColor":"#ffffff","color":"#000000","borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","borderTopColor":"#e0e0e0","borderRightColor":"#e0e0e0","borderBottomColor":"#e0e0e0","borderLeftColor":"#e0e0e0","borderTopLeftRadius":"50%","borderTopRightRadius":"50%","borderBottomRightRadius":"50%","borderBottomLeftRadius":"50%","\u0026:is(:hover, :focus)":{"backgroundColor":"#fafafa","color":"#000000"},".gb-carousel-control-icon svg":{"width":"20px","height":"20px","fill":"currentColor"}},"css":".gb-carousel-control-fb00db15{align-items:center;background-color:#ffffff;color:#000000;display:flex;height:48px;justify-content:center;width:48px;border:1px solid #e0e0e0;border-radius:50%}.gb-carousel-control-fb00db15:is(:hover,:focus){background-color:#fafafa;color:#000000}.gb-carousel-control-fb00db15 .gb-carousel-control-icon svg{width:20px;height:20px;fill:currentColor}"} -->
    <button class="gb-carousel-control gb-carousel-control-fb00db15 gb-carousel-control--previous" data-carousel-control="prev"><span class="gb-carousel-control-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" /></svg></span></button>
    <!-- /wp:generateblocks-pro/carousel-control --></div>
    <!-- /wp:generateblocks/element -->
    
    <!-- wp:generateblocks/element {"uniqueId":"87b00268","tagName":"div","styles":{"position":"absolute","top":"50%","right":"20px","transform":"translateY(-50%)","zIndex":"10"},"css":".gb-element-87b00268{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:10}"} -->
    <div class="gb-element-87b00268"><!-- wp:generateblocks-pro/carousel-control {"uniqueId":"9767ef2c","controlType":"next","iconOnly":true,"tagName":"button","htmlAttributes":{"data-carousel-control":"next"},"styles":{"display":"flex","alignItems":"center","justifyContent":"center","width":"48px","height":"48px","backgroundColor":"#ffffff","color":"#000000","borderTopWidth":"1px","borderRightWidth":"1px","borderBottomWidth":"1px","borderLeftWidth":"1px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","borderTopColor":"#e0e0e0","borderRightColor":"#e0e0e0","borderBottomColor":"#e0e0e0","borderLeftColor":"#e0e0e0","borderTopLeftRadius":"50%","borderTopRightRadius":"50%","borderBottomRightRadius":"50%","borderBottomLeftRadius":"50%","\u0026:is(:hover, :focus)":{"backgroundColor":"#fafafa","color":"#000000"},".gb-carousel-control-icon svg":{"width":"20px","height":"20px","fill":"currentColor"}},"css":".gb-carousel-control-9767ef2c{align-items:center;background-color:#ffffff;color:#000000;display:flex;height:48px;justify-content:center;width:48px;border:1px solid #e0e0e0;border-radius:50%}.gb-carousel-control-9767ef2c:is(:hover,:focus){background-color:#fafafa;color:#000000}.gb-carousel-control-9767ef2c .gb-carousel-control-icon svg{width:20px;height:20px;fill:currentColor}"} -->
    <button class="gb-carousel-control gb-carousel-control-9767ef2c gb-carousel-control--next" data-carousel-control="next"><span class="gb-carousel-control-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" /></svg></span></button>
    <!-- /wp:generateblocks-pro/carousel-control --></div>
    <!-- /wp:generateblocks/element -->
    
    <!-- wp:generateblocks/element {"uniqueId":"04c545b3","tagName":"div","styles":{"position":"absolute","bottom":"30px","left":"50%","transform":"translateX(-50%)","zIndex":"10"},"css":".gb-element-04c545b3{bottom:30px;left:50%;position:absolute;transform:translateX(-50%);z-index:10}"} -->
    <div class="gb-element-04c545b3"><!-- wp:generateblocks-pro/carousel-pagination {"uniqueId":"b01f297e","styles":{".gb-carousel-dot":{"width":"12px","height":"12px","backgroundColor":"rgba(255,255,255,0.5)","\u0026.is-active":{"backgroundColor":"#ffffff"}}},"css":".gb-carousel-pagination-b01f297e .gb-carousel-dot{width:12px;height:12px;background-color:rgba(255,255,255,0.5);\u0026.is-active:[object Object]}","tagName":"nav","htmlAttributes":{"data-pagination-type":"bullets"}} -->
    <nav class="gb-carousel-pagination gb-carousel-pagination-b01f297e" data-pagination-type="bullets"><span class="gb-carousel-pagination-content"></span></nav>
    <!-- /wp:generateblocks-pro/carousel-pagination --></div>
    <!-- /wp:generateblocks/element --></div>
    <!-- /wp:generateblocks-pro/carousel -->
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.