Add carousel container

[me2beats]

Like this one

This is quite popular UI control, can be found in many UI frameworks.

[Calinou]

• Related to Add a CarouselButton node #5139.

This can be achieved by an add-on, especially since most projects don't need a carousel.

[fire-forge]

That can be made with the existing controls easily enough, I think.

[duianto]

Here's an attempt.

godot_image_carousel.mp4

Project

Image Carousel.zip

Scene tree

Carousel (Node2D)
- vBoxContainer
-- OuterHBoxContainer
--- LeftButton
--- InnerHBoxContainer
--- RightButton
-- Label

Script

extends Node2D

onready var left_button = $vBoxContainer/OuterHBoxContainer/LeftButton
onready var right_button = $vBoxContainer/OuterHBoxContainer/RightButton
onready var inner_container = $vBoxContainer/OuterHBoxContainer/InnerHBoxContainer
onready var label = $vBoxContainer/Label

export(String, DIR) var images_dir = "res://images/"
var images = []

var visible_images = 3
var first_visible = 0
var last_visible = first_visible + visible_images - 1


func _ready() -> void:
	images = load_images_from_dir(images_dir)
	
	if visible_images <= 0:
		last_visible = 0
	elif visible_images > len(images):
		last_visible = len(images) - 1
	
	add_images_to_container(images, inner_container)
	enable_or_disable_left_or_right_buttons()
	update_text_visible_and_total_images()


func load_images_from_dir(_images_dir):
	var dir = Directory.new()
	dir.open(_images_dir)
	dir.list_dir_begin()
	var file_name = dir.get_next()
	while file_name != "":
		if file_name.ends_with(".png"):
			images.append(load(_images_dir + "/" + file_name))
#			print(file_name)
		file_name = dir.get_next()
	dir.list_dir_end()
#	print(images)
	return images

func add_images_to_container(_images, _container):
	for i in len(_images):
		var tex_rect = TextureRect.new()
		tex_rect.texture = _images[i]
		if i < first_visible or i > last_visible:
			tex_rect.visible = false
		_container.add_child(tex_rect)

func enable_or_disable_left_or_right_buttons():
	# disable the left button when the first image is visible
	if first_visible == 0:
		left_button.disabled = true
	# disable the right button when the last image is visible
	if last_visible == len(images) - 1:
		right_button.disabled = true

func update_text_visible_and_total_images():
	label.text = "%s-%s/%s" % [first_visible + 1, last_visible + 1, len(images)]


func _on_LeftButton_pressed() -> void:
	if first_visible > 0:
		if right_button.disabled:
			right_button.disabled = false
		first_visible -= 1
		inner_container.get_child(first_visible).visible = true
		inner_container.get_child(last_visible).visible = false
		last_visible -= 1
		update_text_visible_and_total_images()
		enable_or_disable_left_or_right_buttons()

func _on_RightButton_pressed() -> void:
	if last_visible < inner_container.get_child_count() - 1:
		if left_button.disabled:
			left_button.disabled = false
		inner_container.get_child(first_visible).visible = false
		first_visible += 1
		last_visible += 1
		inner_container.get_child(last_visible).visible = true
		update_text_visible_and_total_images()
		enable_or_disable_left_or_right_buttons()

[gnarf2]

thanks, exactly what I needed!
only had to change

var dir = Directory.new()
dir.open(_images_dir)

in func load_images_from_dir

to

var dir = DirAccess.open(_images_dir)

after importing the project to Godot 4.3