screen file_picker:

    default screenshot_image = None

    textbutton _("Auto"):
        xpos 380
        ypos 250
        action FilePage("auto")
    textbutton _("Quick"):
        xpos 380
        ypos 280
        action FilePage("quick")
    textbutton _("Normal"):
        xpos 380
        ypos 310
        action FilePage(1)

    side "c b r":

        area (10, 10, 320, 700)

        viewport id "vp":

            draggable True
            mousewheel True

            vbox:
                spacing 10
                yminimum 2400

                if renpy.get_screen("save"):
                    for i in range(1, 16):

                        # Each file slot is a button.
                        button:
                            xmargin 8
                            action FileAction(i)
                            area (0, 0, 300, 150)
                            style "customFilePicker_button"

                            unhovered SetScreenVariable("screenshot_image", None)

                            hovered SetScreenVariable("screenshot_image", FileScreenshot(i))

                            $ file_name = FileSlotName(i, 15)
                            $ file_time = FileTime(i, empty=_("Empty Slot."))
                            $ save_name = FileSaveName(i)

                            text "[file_name]. [file_time!t]\n[save_name!t]" xalign 0.5 yalign 0.5

                            if FileLoadable(i):
                                textbutton _("Del"):
                                    action FileDelete(i)
                                    xalign 1.0
                                    yalign 1.0

                elif renpy.get_screen("load"):
                    for i in range(1, 16):
                        if FileLoadable(i): # This condition makes sure that only filled slots are displayed

                            # Each file slot is a button.
                            button:
                                xmargin 8
                                action FileAction(i)
                                area (0, 0, 300, 150)
                                style "customFilePicker_button"

                                unhovered SetScreenVariable("screenshot_image", None)

                                hovered SetScreenVariable("screenshot_image", FileScreenshot(i))

                                $ file_name = FileSlotName(i, 15)
                                $ file_time = FileTime(i, empty=_("Empty Slot."))
                                $ save_name = FileSaveName(i)

                                text "[file_name]. [file_time!t]\n[save_name!t]" xalign 0.5 yalign 0.5

                                if FileLoadable(i):
                                    textbutton _("Del"):
                                        action FileDelete(i)
                                        xalign 1.0
                                        yalign 1.0

                        else:
                            null height 0

        bar value XScrollValue("vp") style "customFilePicker_scrollbar"
        vbar value YScrollValue("vp") style "customFilePicker_vscrollbar"

    if screenshot_image is not None:
        add screenshot_image xpos 900 ypos 25

init 1 python:

    config.thumbnail_height = 180
    config.thumbnail_width = 320

    #style.customFilePicker_button.background = "#00000000" #If you uncomment this line, the buttons will become transparent
    style.customFilePicker_vscrollbar.unscrollable = "hide"
    style.customFilePicker_scrollbar.unscrollable = "hide"