'Unity UI Content Slider Tutorial: Create a Swipeable Image Carousel with Pagination and Auto-Move!'

🚀 Unlock the Power of Unity: Create a Dynamic Content Carousel! 🎮🖥️

Welcome, Unity enthusiasts! In this tutorial, we'll delve into the fascinating world of UI development, exploring how to craft a captivating Content Carousel using Unity's versatile features. From automatic content swiping to intuitive navigation, this tutorial covers it all. 🌐✨

🛠️ What You'll Learn:

Setting up a responsive UI Canvas
Implementing a Scroll View for seamless content navigation
Adding automatic content movement with a timer
Utilizing Pagination buttons for user-friendly interaction
Incorporating navigation dots for visual indicators
And much more!
🔥 Why This Tutorial?
Whether you're a seasoned Unity developer or just starting, this tutorial caters to all skill levels. Dive deep into UI best practices, understand the logic behind content carousels, and elevate your game development skills.

🎓 Who is This For?

Unity Developers
Game Development Enthusiasts
UI/UX Designers
🔍 SEO-Optimized Tags:
#UnityTutorial #GameDevelopment #UIProgramming #ContentCarousel #UnityUI #CodingTutorial #UnityDevelopment #LearnUnity #ProgrammingTips #DeveloperGuide

📈 Stay Updated:
Subscribe for more Unity tutorials, game development insights, and coding hacks! 🚀 Don't forget to hit the like button if you find this video helpful.

💡 Have Questions or Need Help?
Drop a comment below, and I'll personally assist you! let's build amazing things together.

[Source Code Here]

in comment section

[fpsprohere]

using System.Collections.Generic;
using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ContentManager : MonoBehaviour
{
[Header("Content Vieport")]
public Image contentDisplay;
public List<GameObject> contentPanels;

[Header("Navigation Dots")]
public GameObject dotsContainer;
public GameObject dotPrefab;

[Header("Pagination Buttons")]
public Button nextButton;
public Button prevButton;

[Header("Page Settings")]
public bool useTimer = false;
public bool isLimitedSwipe = false;
public float autoMoveTime = 5f;
private float timer;
public int currentIndex = 0;
public float swipeThreshold = 50f;
private Vector2 touchStartPos;

// Reference to the RectTransform of the content area
public RectTransform contentArea;

void Start()
{



// Initialize dots
InitializeDots();

// Display initial content
ShowContent();

// Start auto-move timer if enabled
if (useTimer)
{
timer = autoMoveTime;
InvokeRepeating("AutoMoveContent", 1f, 1f); // Invoke every second to update the timer
}
}

void InitializeDots()
{
// Create dots based on the number of content panels
for (int i = 0; i < contentPanels.Count; i++)
{
GameObject dot = Instantiate(dotPrefab, dotsContainer.transform);
Image dotImage = dot.GetComponent<Image>();
dotImage.color = (i == currentIndex) ? Color.white : Color.gray;
dotImage.fillAmount = 0f; // Initial fill amount
// You may want to customize the dot appearance and layout here
}
}

void UpdateDots()
{
// Update the appearance of dots based on the current index
for (int i = 0; i < i++)
{
Image dotImage =
dotImage.color = (i == currentIndex) ? Color.white : Color.gray;

float targetFillAmount = timer / autoMoveTime;
StartCoroutine(SmoothFill(dotImage, targetFillAmount, 0.5f));
}
}

IEnumerator SmoothFill(Image image, float targetFillAmount, float duration)
{
float startFillAmount = image.fillAmount;
float elapsedTime = 0f;

while (elapsedTime < duration)
{
image.fillAmount = Mathf.Lerp(startFillAmount, targetFillAmount, elapsedTime / duration);
elapsedTime += Time.deltaTime;
yield return null;
}

image.fillAmount = targetFillAmount; // Ensure it reaches the exact target
}

void Update()
{
// Detect swipe input only within the content area
DetectSwipe();
}

void DetectSwipe()
{
if (Input.GetMouseButtonDown(0))
{
touchStartPos = Input.mousePosition;
}

if (Input.GetMouseButtonUp(0))
{
Vector2 touchEndPos = Input.mousePosition;
float swipeDistance = touchEndPos.x - touchStartPos.x;

// Check if the swipe is within the content area bounds
if (Mathf.Abs(swipeDistance) > swipeThreshold &&
{
if (isLimitedSwipe && ((currentIndex == 0 && swipeDistance > 0) || (currentIndex == contentPanels.Count - 1 && swipeDistance < 0)))
{
// Limited swipe is enabled, and at the edge of content
return;
}

if (swipeDistance > 0)
{
PreviousContent();
}
else
{
NextContent();
}
}
}
}

// Check if the touch position is within the content area bounds
bool IsTouchInContentArea(Vector2 touchPosition)
{
return RectTransformUtility.RectangleContainsScreenPoint(contentArea, touchPosition);
}

void AutoMoveContent()
{
timer -= 1f; // Decrease timer every second

if (timer <= 0)
{
timer = autoMoveTime;
NextContent();
}

UpdateDots(); // Update dots on every timer tick
}

void NextContent()
{
currentIndex = (currentIndex + 1) % contentPanels.Count;
ShowContent();
UpdateDots();
}

void PreviousContent()
{
currentIndex = (currentIndex - 1 + contentPanels.Count) % contentPanels.Count;
ShowContent();
UpdateDots();
}

void ShowContent()
{
// Activate the current panel and deactivate others
for (int i = 0; i < contentPanels.Count; i++)
{
bool isActive = i == currentIndex;


// Update dot visibility and color based on the current active content
Image dotImage =
dotImage.color = isActive ? Color.white : Color.gray;

if (isActive)
{
// Reset timer and fill amount when the content is swiped
timer = autoMoveTime;
dotImage.fillAmount = 1f;
}
else
{
// Set the fill amount to 0 for non-active content
dotImage.fillAmount = 0f;
}
}
}

public void SetCurrentIndex(int newIndex)
{
if (newIndex >= 0 && newIndex < contentPanels.Count)
{
currentIndex = newIndex;
ShowContent();
UpdateDots();
}
}
}

[Someone-fuwz]

Awesome tutorial, thank you. But I'm not gonna lie but from 1:35 on your voice has this 😏😏😏 touch. Even pressing boring buttons sounds like an intense thing is going on😂

[volpe]

Great video, really helpfull! I have a question about the last sentence that you say "it worked also in a mobile app" but how it works if all the input are by mouse? Thanks for the answer

[NatureRiders]

amazing tutorial but why the auto move function is not working

[alexeysmirnov]

Was the text for this tutorial written by an LLM?

[CapeYa-jvkz]

I can't swipe content with the cursor, I have to use a button, is there a solution?

[n_mckean]

Why people are still making UI outside of UI Toolkit is beyond me. Devs need to move forward.