To add buttons is custom work, basically you have to add them in the implementation of the gutenberg block and the pass the id/class of the buttons to the slider's options
the outer wrapper. However the button can be anywhere. The content carousel is defined at line 1295 in /js/scripts.js and this is the link to the swiper API
Hi,
Is it possible to display navigation for carousel and slider ? Like navigation bullets or arrows (as it swiper.js, I assume it is possible).
Also, is it possible to have the custom Colega Lightbox for the native image gallery block ? (with navigation between images in the gallery)
Thanks in advance.
Hello Clément,
if it is about the content image slider
https://prnt.sc/uIWjE0r0FXD3
you have the cursor arrows which indicates a drag. or click on prev / next
https://prnt.sc/OxOjvpq1AynP
To add buttons is custom work, basically you have to add them in the implementation of the gutenberg block and the pass the id/class of the buttons to the slider's options
https://swiperjs.com/swiper-api#navigation
Regarding the image popup it does function like that:
https://prnt.sc/zJMpcn_rqI_K
http://clapat.ro/themes/colega-wordpress/colega_portfolio/opulence/
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Thank you for your answer.
Could you tell me where is store the gutenberg block "carousel" please ?
Hello Clément,
the image carousel block is implemented in /colega-gutenberg-blocks/blocks/blocks.js
https://prnt.sc/epaEfjxrsZx6
the outer wrapper. However the button can be anywhere. The content carousel is defined at line 1295 in /js/scripts.js and this is the link to the swiper API
https://swiperjs.com/swiper-api#navigation
Of interest are nextEl and prevEL parameters
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hello!
Thank you for the support.
I added pagination and navigation arrows to the Colega Carousel in script.js.
I achieved to display pagination in this page by including it in HTML in the page : https://dev.clementdroff.fr/references/diskenn-2/
But I can't find how to display it directly in the Gutenberg element.
Could you help to do that ? I'm not familiar to javascript...
I want to add <div class="swiper-pagination disable-drag"></div> after the carousel.
Thank you in advance.
Best regards.
Ok, great follow the code screenshot from my prev comment
and replace the code block
let inner_el = el( 'div', { className: 'swiper-wrapper' }, InnerBlocks.Content() );
let carousel_class = 'content-carousel';
if( props.attributes.loop == 'yes' ){
carousel_class = 'content-looped-carousel';
}
return el( 'div', { className: 'swiper-container ' + carousel_class + ' disable-drag' }, inner_el );
with following
let inner_el = el( 'div', { className: 'swiper-wrapper' }, InnerBlocks.Content() );
let pagination_el = el( 'div', { className: 'swiper-pagination disable-drag' }, InnerBlocks.Content() );
let carousel_class = 'content-carousel';
if( props.attributes.loop == 'yes' ){
carousel_class = 'content-looped-carousel';
}
return el( 'div', { className: 'swiper-container ' + carousel_class + ' disable-drag' }, inner_el, pagination_el );
This will insert the pagination div inside the slider wrapper div but after the slider
Hard refresh the page (Ctrl+F5) before testing
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi!
Thank you very much. It works very weel.
I just had to add some CSS customization to finish ;)
Thank you again for the support.
Best regards.
Excellent ! gj on this, Clément
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy