How to create an image gallery with previous and next button with C#?

Hi, I’m a total beginner in Unity and I’m currently developing a project in 2D and I’m using C#.
I want to make a simple gallery that loads images from a folder and each image has next and previous button.
So I have 10 images.
I know that I don’t have to make 10 scenes with 10 Previous and 10 Next Buttons, but how do I do it in C#?
It’s supposed to look like this:

I would use the UI system for event triggering, IE: When they click the next/prev buttons, then integrate an array to store the images in at runtime, and just cycle through that array. As far as loading images from a folder, outside of Unity, I dont know how to do that, though if your not opposed to importing all your images into Unity already, you could try this:

Create a new script for your gallery, it will handle the storing of all the images and the actual rotation between them.

C#

//At the very top...
using UnityEngine.UI;

//Outside your functions where you want to set all your declarations...
public Sprite[] gallery; //store all your images in here at design time
public Image displayImage; //The current image thats visible
public Button nextImg; //Button to view next image
public Button prevImg; //Button to view previous image
public int i = 0; //Will control where in the array you are

public void BtnNext () {
if(i + 1 < gallery.Length){
i++;
}
}

public void BtnPrev () {
if(i - 1 > 0){
i--;
}
}

void Update () {
displayImage.sprite = gallery*;*

}

This script would go on a static gameobject, like your Main Camera for example, assuming you never delete it at any point in your game.
I feel like I may be forgetting something, however, if you import all your images, and change their type to Sprites (click the image from inside Unity, in the Inspector, change it from the default “Texture” to “Sprite”), then load each image into the array you just created - youll have to specify the size of the array before you can load the images in (and all this is done from the Inspector).
Once the images are all loaded in, create your 2 buttons, and attach those to your script as well (from the Inspector), and it should work.
That is untested code as well, if this doesnt solve your issue, tell me what happens when you tried it and ill see where I might of misled you.

I’ve been trying to implement this first code into my project, with little success. I had to add a few using UnityEngine; namespaces in order to get it to work at first. But there is still problems with the void update portion

Basically trying to get a Button to go to next Sprite Image / previous Sprite Image in array

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Sprites;
using System.Collections;

public class NextButton : MonoBehaviour {

	public Sprite[] gallery; 
	public Sprite displayImage;
	public Button nextImg;
	public Button prevImg;
	public int i = 0;

	public void BtnNext (){
		if(i + 1 < gallery.Length){
			i++;
		}
	}

	public void BtnPrev () {
		if (i - 1 > 0){
			i --;
		}
	}
	void Update () {
		displayImage.Sprite = gallery*;*
  • }*
    }

Just an Idea how i did it in my project .

  1. take a image in the canvas and add two animation moving left and moving right to the image and make a prefab of it .
    2.put all the images(prefab) at the right of the screen outside the camera .and add all the images to the array.
  2. Now add the event to the button move_left and right . take a pointer which will be pointing to the first element of the array which is being displayed on the screen
  3. when you click the button access the next element on the array and get the animation via getcomponent and play the right move animation in reverse order for the current image and left move animation for the next element of the array and update the pointer …

I am sharing my script hope this will help and make sence

  public void left_arrow()
    	{
    		if(pointer < panel_to_init && allow_scroll)
    		{	
    			allow_scroll = false;
    			StartCoroutine (Allow_click());
    
    
    			
    				Animation anim = panel [pointer].GetComponent<Animation> ();
    		
    				anim.animation ["Panel_right"].speed = -1;
    				anim.animation ["Panel_right"].time = anim.animation ["Panel_right"].length;
    				anim.animation.Play ("Panel_right");
    
    			
    			panel [pointer+1].GetComponent<Animation> ().animation["Panel_left"].speed = 1;
    				panel [pointer + 1].GetComponent<Animation> ().Play ("Panel_left");	
    		 
    				pointer ++;
    		}
    
    
    
    		
    
    
    	}
    
    	public void right_arrow()
    	{
    		if(pointer !=0 && allow_scroll)
    		{
    			allow_scroll = false;
    			StartCoroutine (Allow_click());
    
    			Animation anim = panel [pointer].GetComponent<Animation> ();
    
    			anim.animation["Panel_left"].speed = -1;
    			anim.animation["Panel_left"].time = anim.animation["Panel_left"].length;
    			anim.animation.Play("Panel_left");
    
    			anim.animation["Panel_right"].speed = 1;
    
    			
    			panel [pointer-1].GetComponent<Animation> ().animation["Panel_right"].speed = 1;
    			panel [pointer-1].GetComponent<Animation> ().Play ("Panel_right");
    
    			pointer --;
    		}
    
    
    
    
    
    
    	}

Don’t need to subtract 1 from i in BtnPrev ()

 public void BtnNext (){
         if(i + 1 < gallery.Length){
             i++;
         }
     }
 
     public void BtnPrev () {
         if (i > 0){
             i --;
         }
     }

Try Image Gallery Kit & 3 gallery types.


Hi all!

I do not know if this thread is still relevant, but it was to me and to others, I’m sure.

The script posted by Dibbie is great.

It needed some few touches to work wonderful.

Please find my solution below:

using UnityEngine;
using UnityEngine.UI;

public class CarSelection : MonoBehaviour
{
    public Sprite[] gallery; //store all your images in here at design time
    public Image displayImage; //The current image thats visible
    public Button nextImg; //Button to view next image
    public Button prevImg; //Button to view previous image
    public int i = 0; //Will control where in the array you are

    void OnEnable()
    {
        //Register Button Events
        nextImg.onClick.AddListener(() => NextCarButton());
        prevImg.onClick.AddListener(() => PreviousCarButton());
    }


    public void NextCarButton()
    {
        if (i + 1 < gallery.Length)
        {
            i++;
        }
    }

    public void PreviousCarButton()
    {
        if (i - 1 >= 0)
        {
            i--;
        }
    }

    void Update()
    {
        displayImage.sprite = gallery*;*

}
}

As for the image of displayImage , just create a new Image in the Hierarchy and attach the sprite image that you need.
Also, for me, changing the below script:
if (i - 1 > 0)
{
i–;
}
To this:
if (i - 1 >= 0)
{
i–;
}
That way, the sprite on Element 0 (starting image) will also load when pressing the previous button.
I hope this helps !!