Image slider

Store Design
,
1

Can anybody please help me create an image slider for multiple product images, but I don’t want to display the thumbnail? Thank you!

Link: https://2cb7cc-ab.myshopify.com/

Pass: Minitrampoline

2

where you want to add the slider? on home page or on product page?

3

On the product page for all the product images

4

Hi @NgocLe1 , You can follow my instructions!

Go to Themes → Edit Code.

BSSTechFusion_0-1714819101533.png
BSSTechFusion_0-1714819101533.png2000×976 186 KB

Find the file theme.liquid. Add the following CSS snippet before the closing head tag ()

It will look like this

BSSTechFusion_1-1714819121008.png
BSSTechFusion_1-1714819121008.png1746×924 145 KB

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

The achieved result

BSSTechFusion_2-1714819158513.png
BSSTechFusion_2-1714819158513.png1707×973 163 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

5

Hi @NgocLe1 , You can try to follow my instructions.

Go to Themes → Edit Code.

BSSTechFusion_0-1714965503060.png
BSSTechFusion_0-1714965503060.png2000×976 186 KB

Find the file theme.liquid. Add the following CSS snippet before the closing head tag ()

It will look like this

BSSTechFusion_1-1714965531946.png
BSSTechFusion_1-1714965531946.png1746×924 145 KB

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

The achieved result

BSSTechFusion_3-1714965577205.png
BSSTechFusion_3-1714965577205.png1707×973 163 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

6

Hi @NgocLe1 , You can try to follow my instructions.

Go to Themes → Edit Code.

BSSTechFusion_0-1714966751961.png
BSSTechFusion_0-1714966751961.png2000×976 186 KB

Find the file theme.liquid. Add the following CSS snippet before the closing head tag ()

It will look like this

BSSTechFusion_1-1714966767299.png
BSSTechFusion_1-1714966767299.png1746×924 145 KB

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

The achieved result

BSSTechFusion_2-1714966807072.png
BSSTechFusion_2-1714966807072.png1707×973 163 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

7

Hi @NgocLe1 , you can follow my instruction

Go to Themes → Edit Code.

BSSTechFusion_3-1714966929903.png
BSSTechFusion_3-1714966929903.png1909×931 153 KB

Find the file theme.liquid. Add the following CSS snippet before the closing head tag ()

It will look like this

BSSTechFusion_4-1714966942940.png
BSSTechFusion_4-1714966942940.png1734×918 154 KB

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

The achieved result

BSSTechFusion_5-1714966967073.png
BSSTechFusion_5-1714966967073.png1653×940 143 KB

If you find it useful, please give us a like and mark it as a solution. Thank ^^