Viewpager2 adapter showing first page blank

I am trying to create full screen image slider with viewpager2. But when I am running the code, first page is not showing any image, but when I swipe to another page and revisit first page, then image is showing. I tried everything but could not find the problem. Please help. Here's my code.

PS - I changed the images to color to see the layout on screen easily. The same thing is happening even when I am passing images list instead of color list to my adapter.

My Adapter :

class FullScreenImageAdapter(val context: Context, val sliderItems: MutableList<Int>, val viewPager2: ViewPager2) : RecyclerView.Adapter<FullScreenImageAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.fullscreen_image_container,
            parent, false))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.imageView.setBackgroundResource(sliderItems[position])

    }

    override fun getItemCount(): Int {
        return sliderItems.size
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView= itemView.findViewById(R.id.fullImageId)
    }
}

fullscreen_image_container.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fullImageId"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop">

</ImageView>

Code in my fragment :

class FullScreenImageFragment : Fragment() {

    lateinit var viewPager2: ViewPager2
    lateinit var navController: NavController
    lateinit var sliderAdapter: FullScreenImageAdapter
    var sliderImages: MutableList<Int> = mutableListOf()
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_full_screen_image, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        navController = view.findNavController()

        sliderImages.add(R.color.Green)
        sliderImages.add(R.color.Orange)
        sliderImages.add(R.color.black)
        sliderImages.add(R.color.colorchery)

        header_layout_fullscreen.app_name_header.visibility = View.GONE
        header_layout_fullscreen.image_back_btn.setOnClickListener {
            navController.navigateUp()
        }

        viewPager2 = view.findViewById(R.id.full_image_viewpager) as ViewPager2

        sliderAdapter = FullScreenImageAdapter(requireContext(), sliderImages, viewPager2)
        viewPager2.adapter = sliderAdapter
    }
}

fragment_full_screen_image.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ui.FullScreenImageFragment">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/full_image_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Thanks

EDIT :- I created a new activity and shifted all my code from fragment to activity, and it is working completely fine there. I still don't know what is the problem with fragment. I would still like to know the issue with fragment if anyone of you can find it. I prefer to use single activity in an application but I will use this workaround for now.