website: fix carousel bugs

This commit is contained in:
RJ Spiker 2018-12-06 12:17:35 -07:00 committed by Jeff Escalante
parent f76022fa63
commit 516ba47609
4 changed files with 58 additions and 52 deletions

View File

@ -4,6 +4,11 @@
//= require hashicorp/mega-nav
//= require hashicorp/sidebar
//= require hashicorp/analytics
//= require consul-connect/vendor/object-fit-images.min.js
//= require consul-connect/vendor/siema.min.js
//= require consul-connect/carousel
//= require analytics
//= require gsap-custom
//= require animations

View File

@ -1,44 +1,55 @@
objectFitImages()
document.addEventListener('turbolinks:load', function () {
var qs = document.querySelector.bind(document)
var qsa = document.querySelectorAll.bind(document)
var carousel = qs('.siema')
var qs = document.querySelector.bind(document)
var qsa = document.querySelectorAll.bind(document)
if (carousel) {
objectFitImages()
// siema carousels
var dots = qsa('.g-carousel .pagination li')
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: function() {
// siema carousels
var dots = qsa('.g-carousel .pagination li')
var siema = new Siema({
selector: carousel,
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: function() {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
}
dots[siema.currentSlide].classList.add('active')
}
})
// on previous button click
qs('.g-carousel .prev')
.addEventListener('click', function() {
siema.prev()
})
// on next button click
qs('.g-carousel .next')
.addEventListener('click', function() {
siema.next()
})
// on dot click
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
dots[i].addEventListener('click', function() {
siema.goTo(this.dataset.index)
})
}
dots[carousel.currentSlide].classList.add('active')
}
document.addEventListener('turbolinks:before-cache', function() {
siema.goTo(0) // reset pagination
siema.destroy(true)
});
}
})
// on previous button click
qs('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev()
})
// on next button click
qs('.g-carousel .next')
.addEventListener('click', function() {
carousel.next()
})
// on dot click
for (var i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i)
})
}

View File

@ -242,8 +242,8 @@ description: |-
</a>
</div>
<ul class='pagination'>
<li class='active'></li>
<li></li>
<li data-index='0' class='active'></li>
<li data-index='1'></li>
</ul>
<span class='prev'>
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
@ -269,8 +269,3 @@ description: |-
</section>
</div>
<% content_for :scripts do %>
<script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
<script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
<% end %>

View File

@ -263,8 +263,8 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
</a>
</div>
<ul class='pagination'>
<li class='active'></li>
<li></li>
<li data-index='0' class='active'></li>
<li data-index='1'></li>
</ul>
<span class='prev'>
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
@ -290,8 +290,3 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
</section>
</div>
<% content_for :scripts do %>
<script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
<script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
<% end %>