markdown 直接在产品页面上的叙事产品图像模式幻灯片

Posted 2021-05-05

**Theme:** Narrative

**Last version(s) tested:** 6.0.5

**Recommended design time:** 15 minutes


----

## What you have
![](https://screenshot.click/29-41-lpuzf-65iug.gif)

## What you want
![](https://screenshot.click/29-38-r17cb-oqkvf.gif)

----

## What you do

**Step 1:** Open product-template.liquid and change

```
<div class="page-width page-width--no-gutter">
```
to
```
<div class="page-width page-width--no-gutter" style="display: none;">
```

**Step 2:** Just above the div we just edited add this:
```
  <div id="appendSlideshow"></div>
```


It should now look like this:
![](https://screenshot.click/29-26-vys3c-nj7s4.jpg)


**Step 3:** In the same file, add this code to the bottom of the file, just before the schema starts

```
<style>
  .product-slideshow {
    height: 700px !important;
    position: inherit !important;
  }
</style>

<script>
  window.onload = function(e){ 
    let appendElement = document.getElementById("appendSlideshow")
    let slideshow = document.getElementsByClassName("product-slideshow")[0]
    appendElement.appendChild(slideshow); 
    document.getElementsByClassName("product-slideshow__open")[0].click();
  }
</script>
```

**Step 4:** Find and comment out the utils.disableScrollBody() and trapfocus in theme.js (around line 5630 in Narrative 6.0.5) like so:
![](https://screenshot.click/08-10-u5r5q-vmvr5.jpg)



----

**Additional notes:**

If it doesn’t work you might need to remove the .min from the theme.liquids theme.min.js import to make sure the theme isn't loading the minified unmodified js file