Skip to content

Commit

Permalink
docs(website): make slider work
Browse files Browse the repository at this point in the history
  • Loading branch information
@berndartmueller
berndartmueller committed Sep 2, 2020
1 parent bdc6860 commit 7ad358c
Show file tree
Hide file tree
Showing 12 changed files with 88 additions and 438 deletions.
22 changes: 8 additions & 14 deletions examples/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@
<link rel="stylesheet" href="dist/index.css" />
<style>
.image-swiper {
border: 1px solid #ccc;
background-color: #333;
background-color: #fff;
height: 265px;
width: 400px;
margin: 0 auto;
margin-top: 50px;
}

.image-swiper .virchual__frame {
border-radius: 4px;
}

.image-slide {
height: 100%;
display: block;
Expand All @@ -22,20 +25,11 @@
<div class="virchual image-swiper">
<div class="virchual__frame" style="height: 100%">
<div class="virchual__slide">
<picture
><source
type="image/webp"
srcset="
https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.webp,
https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.webp 2x
" />
<picture>
<source
type="image/jpeg"
srcset="
https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.jpg,
https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg 2x
" />
<img src="https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg" itemprop="image"
srcset="https://source.unsplash.com/L7hI4WkbEZY/400x265, https://source.unsplash.com/L7hI4WkbEZY/800x530 2x" />
<img src="https://source.unsplash.com/L7hI4WkbEZY/400x265" itemprop="image"
/></picture>
</div>
</div>
Expand Down
30 changes: 19 additions & 11 deletions examples/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,33 @@ import './../../src/css/styles.css';
[].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
const instance = new Virchual(slider, {
slides: () => {
const unsplashImageIds = [
'7EsFOzUoIzU',
'lUtPqjz5D5k',
'1-9nfcJ7-Zk',
'ZmQh4ojSA-k',
'9ZaqDVDdMwg',
'OhqiMvM6NsE',
'C8mZsNgGZk0',
'am6_dPRmWwI',
'M2FEVCu4Osw',
];
const slides: string[] = [];

// add 9 more slides to a total of 10
for (let i = 1; i < 10; i++) {
const imageId = unsplashImageIds[i - 1];

slides.push(`
<picture>
<source
type="image/webp"
srcset="
https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.webp,
https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.webp 2x
" />
<source
type="image/jpeg"
srcset="
https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.jpg,
https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg 2x
" />
<img src="https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg" itemprop="image"/>
srcSet="
https://source.unsplash.com/${imageId}/400x265,
https://source.unsplash.com/${imageId}/800x530 2x
"
/>
<img src="https://source.unsplash.com/${imageId}/400x265" itemProp="image" />
</picture>
`);
}
Expand Down
6 changes: 5 additions & 1 deletion src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@
border: none;
background-color: transparent;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
position: absolute;
z-index: 1;
Expand All @@ -87,7 +90,8 @@
width: 20px;
display: block;
fill: currentcolor;
color: #000;
color: #fff;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

.virchual__pagination {
Expand Down
59 changes: 26 additions & 33 deletions website/pages/en/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,48 +22,48 @@ class HomeSplash extends React.Component {
<svg width="300" viewBox="0 0 799 193" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="-52%" x2="50%" y2="210.6%" id="a">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-111.3%" x2="50%" y2="253.9%" id="b">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-107.6%" x2="50%" y2="246.1%" id="c">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-52.7%" x2="50%" y2="211.1%" id="d">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-114.9%" x2="50%" y2="253.6%" id="e">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-108.4%" x2="50%" y2="246.8%" id="f">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="-52.9%" x2="50%" y2="211.3%" id="g">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="84%" y1="-.7%" x2="-104.9%" y2="161.8%" id="h">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="96.5%" y1="-18.6%" x2="-30.9%" y2="136%" id="i">
<stop stop-color="#ED3557" offset="0%" />
<stop stop-color="#8A479A" offset="100%" />
<stop stopColor="#ED3557" offset="0%" />
<stop stopColor="#8A479A" offset="100%" />
</linearGradient>
<linearGradient x1="43.9%" y1="20.6%" x2="73.6%" y2="90.3%" id="j">
<stop stop-color="#ED3557" stop-opacity="0" offset="0%" />
<stop stop-color="#B43F7E" stop-opacity=".6" offset="40.9%" />
<stop stop-color="#8A479A" stop-opacity=".9" offset="100%" />
<stop stopColor="#ED3557" stopOpacity="0" offset="0%" />
<stop stopColor="#B43F7E" stopOpacity=".6" offset="40.9%" />
<stop stopColor="#8A479A" stopOpacity=".9" offset="100%" />
</linearGradient>
</defs>
<g fill-rule="nonzero" fill="none">
<g fillRule="nonzero" fill="none">
<path
d="M250 39.9c0 17.8-27 17.8-27 0 0-18 27-18 27 0zm-25 25.8v93.2h23V65.7h-23z"
fill="url(#a)"
Expand Down Expand Up @@ -160,21 +160,14 @@ class Index extends React.Component {
<div className="virchual__frame" style={{ height: '100%' }}>
<div className="virchual__slide">
<picture>
<source
type="image/webp"
srcset="
https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.webp,
https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.webp 2x
"
/>
<source
type="image/jpeg"
srcset="
https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.jpg,
https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg 2x
srcSet="
https://source.unsplash.com/L7hI4WkbEZY/400x265,
https://source.unsplash.com/L7hI4WkbEZY/800x530 2x
"
/>
<img src="https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg" itemprop="image" />
<img src="https://source.unsplash.com/L7hI4WkbEZY/400x265" itemProp="image" />
</picture>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions website/siteConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ const siteConfig = {

// Add custom scripts here that would be placed in <script> tags.
// '//cdn.jsdelivr.net/npm/virchual@next/dist/index.bundle.js'
scripts: ['https://buttons.github.io/buttons.js', 'js/index.bundle.js', 'js/index.js'],
stylesheets: ['//cdn.jsdelivr.net/npm/virchual@next/dist/index.css'],
scripts: ['https://buttons.github.io/buttons.js', 'js/virchual.bundle.min.js', 'js/index.js'],
stylesheets: ['css/virchual.css'],

// On page navigation for the current documentation page.
onPageNav: 'separate',
Expand Down
7 changes: 5 additions & 2 deletions website/static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@
}

.demoSection .image-swiper {
border: 1px solid #ccc;
background-color: #333;
background-color: #fff;
height: 265px;
width: 400px;
margin: 0 auto;
Expand All @@ -39,6 +38,10 @@
fill: currentcolor;
}

.demoSection .image-swiper .virchual__frame {
border-radius: 4px;
}

.nav-footer {
background: transparent;
}
Expand Down
1 change: 1 addition & 0 deletions website/static/css/virchual.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 7ad358c

Please sign in to comment.