diff options
Change Carousels image number to variable #428
2 files changed, 3 insertions, 1 deletions
| -rw-r--r-- | docs/experimentals/carousels.html | 1 | ||||
| -rw-r--r-- | docs/experimentals/viewer-360.html | 3 |
diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html index be88354..f584d52 100644 --- a/docs/experimentals/carousels.html +++ b/docs/experimentals/carousels.html @@ -247,6 +247,7 @@ </div> </div> </div> + <p>The default image number of Carousels is <code>8</code>. You can add more images by changing the variable <code>$carousel-number</code> in <code>_carousels.scss</code> and re-compiling the CSS.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel"</span>></span> <span class="hljs-comment"><!-- carousel locator --></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span> diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html index 83882f1..394db70 100644 --- a/docs/experimentals/viewer-360.html +++ b/docs/experimentals/viewer-360.html @@ -223,7 +223,8 @@ </div> <p> Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p> - <p>You will need to use your own product image sprite (all angle of photos in one image) and define variables to use this component. The default image number is <code>36</code>.</p> + <p>You will need to use your own product image sprite (all angle of photos in one image) and change the attribute <code>max</code> to use this component.</p> + <p>The default image number in CSS is <code>36</code>. You can change the image number by changing the variable <code>$image-number</code> in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>></span> <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span> |