Rouergue Creation Carousel Style Query Loop

설명

This plugin enhances the Gutenberg Query Loop block by adding a new “Carousel” style
that transforms the list of posts or CPT into a horizontal scrolling carousel, using only modern CSS.

Features:

  • Works with the native WordPress Query Loop block
  • “Carousel” style selectable in the Styles panel of the block settings
  • By default, the carousel allows scrolling by pagination of three posts per page.
  • Navigation with built-in browser scroll buttons & markers
  • Responsive, compatible with desktop & mobile devices.

🔍 Démo

Discover the plugin in action on our Demo Site

🌍 Translations

◆ English
◆ French

Discover our other plugins

Easy Custom Event Tickets
Editor Custom Color Palette
Filter Bar Custom Post Type
Rouergue Creation Top Notice Bar
Rouergue Creation Events Sidebar
Slider Galerie Native Responsive

스크린샷

  • Selecting the “Carousel” style in the Query Loop block
  • Example of the carousel display on the front-end

설치

  1. From your site dashboard, go to Plugins -> Add New.
  2. Search for “Native Block Carousel Query Loop”
  3. Click install and activate the plugin
  4. In the block editor (Gutenberg), insert a Query Loop block
  5. In the block settings Styles Panel, select the Carousel style
  6. In the Block Settings, define a Custom Query Type, choose your Post Type, select a number of items per page greater than three, in Advanced settings disable Reload Entire Page.

FAQ

Is it compatible with all browsers?

The carousel uses recent CSS specifications.
Currently, it is supported by Chrome, Edge and Opera.

Other browsers will display a standard Query Loop layout.

Does the plugin use JavaScript?

Yes, a very lightweight JavaScript is used solely to enable keyboard navigation with the arrow keys .
The carousel’s core functionality relies on native CSS.

Is keyboard navigation possible?

Yes.

  • Right arrow (): next page
  • Left arrow (): previous page
    A loop mode allows you to return to the beginning or the end.

Can I change the slider width?

To change the slider width, you can:

  • Embed the Query Loop block within a Column block.
  • You can also customize the carousel width by overriding the plugin’s CSS file via your child theme,or via the tool in the Appearance/Customize/Custom CSS menu.
    .wp-block-query.is-style-nbcql-carousel-query-loop{
    width:720px;
    max-width: 100%;
    }

후기

이 플러그인에 대한 평가가 없습니다.

기여자 & 개발자

“Rouergue Creation Carousel Style Query Loop”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

“Rouergue Creation Carousel Style Query Loop”(이)가 1 개 언어로 번역되었습니다. 기여해 주셔서 번역자님께 감사드립니다.

자국어로 “Rouergue Creation Carousel Style Query Loop”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.

변경이력

1.0.1

Added

  • Added keyboard navigation using the keys
  • Added a loop mode for keyboard navigation
  • Updated documentation

Corrected

  • The Carousel style is not applied to the
    Query Loop block when multiple CSS classes are present.

1.0

  • First stable version
  • Added the “Carousel” style for the Query Loop block