Add main image slider in prdocut page

[Devlop33]

I am learning on my dawn theme,i am naive and i m getting worried after seeing bulk code of main-product.liquid,I want prev and next arrow button in main-product not in thumnail ,and I have already set schema settings of [product page(product overview section)] of layout to thumbnail.
what i want is this type-
Please Help me ,Is it possible ,
How is it possible

[SectionKit]

Hello there @Devlop33,

Can you share your site url along with the password. This will helps to gave you better answer for your query.

Thanks

[Mustafa_Ali]

Hey @Devlop33 try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
.product__media-nav { display: flex !important; }
</style>

[devcoders]

Hi @Devlop33

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Devlop33]

my store url

learning store dmc

passwrd:pawrte

[Devlop33]

thanku but not working

[tim_tairli]

I remember sharing this solution already, but it seems like it was lost during forum migration.

1. Switch you “Product information” section setting “Layout” to “Thumbnail carousel”;
   

   

2. Paste this code to the sections “Custom CSS”:

.slider-buttons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .slider-buttons {
    margin: 0 -2rem;
    width: calc(100% + 4rem);
    padding: 0;
  }
}
.slider-counter {
  display: none;
}
.product__media-item {
  width: 100%;
  display: flex;
  align-items: center;
}
.product__media-list + div .slider-button {
  z-index: 10;
  transform: scale(1.25);
  border-radius: 50%;
  background: rgba(var(--color-foreground), 0.15);
}

3. Add a “Custom liquid” block to the “Product information” section and paste this code:

<script>
  document
  .querySelector('.product__media-list.slider--mobile')
  .classList.replace('slider--mobile', 'slider--everywhere')
</script>

4. If result is not satisfactory, go to homepage and then again to the product page for code to load fully.

---

This will work in Dawn theme (and most themes of the Dawn family) and convert your main media gallery to slideshow on desktop with prev/next buttons.

The result should be like this:

---

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it