Skip to content

Commit

Permalink
complete the dot navigation example
Browse files Browse the repository at this point in the history
  • Loading branch information
@nstanard
nstanard committed Oct 3, 2016
1 parent 75070e6 commit fb8593f
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 15 deletions.
49 changes: 37 additions & 12 deletions demo/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,38 @@ footer {
display: inline-block;
}

.simple li,
.rewind li,
.events li {
.simple > .frame li,
.rewind > .frame li,
.events > .frame li {
width: 270px;
margin-right: 10px;
}

.dots {
margin: 0;
padding: 0;
text-align: center;
position: absolute;
width: 100%;
}

.dots > li {
background-color: #eee;
border: 1px solid #666;
border-radius: 5px;
box-shadow: inset 1px 1px 1px #888;
display: inline-block;
height: 10px;
width: 10px;
margin: 0 5px;
cursor: pointer;
}

.dots > li.active {
background-color: #41ABE5; // MAKE IT BLUE CAUSE ACTIVE!
box-shadow: inset 2px 0px 2px -2px #333; // Change the boxshadow inset... just cause
}

.percentage .slides {
display: block;
}
Expand All @@ -227,9 +252,9 @@ footer {
margin-right: 10px;
}

.simple li:last-child,
.rewind li:last-child,
.events li:last-child,
.simple > .frame li:last-child,
.rewind > .frame li:last-child,
.events > .frame li:last-child,
.variablewidth li:last-child,
.multipleelements li:last-child,
.multislides li:last-child,
Expand Down Expand Up @@ -306,9 +331,9 @@ footer {
margin: 0 auto 20px;
}

.simple li,
.rewind li,
.events li {
.simple > .frame li,
.rewind > .frame li,
.events > .frame li {
width: 580px;
}

Expand Down Expand Up @@ -346,9 +371,9 @@ footer {
width: 880px;
}

.simple li,
.rewind li,
.events li {
.simple > .frame li,
.rewind > .frame li,
.events > .frame li {
width: 880px;
}

Expand Down
69 changes: 66 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,46 @@ <h2>Single element - dot navigation</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
</span>

<ul class="js_dots"></ul>
<ul class="js_dots dots"></ul>
</div>

<div class="examplecode"><pre><code class="javascript">
document.addEventListener('DOMContentLoaded', function () {
var simple_dots = document.querySelector('.js_simple_dots');
var dot_count = simple_dots.querySelectorAll('.js_slide').length;
var dot_container = simple_dots.querySelector('.js_dots');
var dot_list_item = document.createElement('li');

function handleDotEvent(e) {
if (e.type === 'before.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
var clone = dot_list_item.cloneNode();
dot_container.appendChild(clone);
}
dot_container.childNodes[0].classList.add('active');
}
if (e.type === 'after.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
dot_container.childNodes[i].addEventListener('click', function(e) {
dot_navigation_slider.slideTo(Array.prototype.indexOf.call(dot_container.childNodes, e.target));
});
}
}
if (e.type === 'after.lory.slide') {
for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
dot_container.childNodes[i].classList.remove('active');
}
dot_container.childNodes[e.detail.currentSlide - 1].classList.add('active');
}
}
simple_dots.addEventListener('before.lory.init', handleDotEvent);
simple_dots.addEventListener('after.lory.init', handleDotEvent);
simple_dots.addEventListener('after.lory.slide', handleDotEvent);

var dot_navigation_slider = lory(simple_dots, {
infinite: 1,
enableMouseEvents: true
});
});

</code></pre></div>
Expand Down Expand Up @@ -718,7 +752,10 @@ <h2>Events</h2>

document.addEventListener('DOMContentLoaded', function () {
var simple = document.querySelector('.js_simple');
var dot_navigation = document.querySelector('.js_simple_dots');
var simple_dots = document.querySelector('.js_simple_dots');
var dot_count = simple_dots.querySelectorAll('.js_slide').length;
var dot_container = simple_dots.querySelector('.js_dots');
var dot_list_item = document.createElement('li');
var percentage = document.querySelector('.js_percentage');
var rewind = document.querySelector('.js_rewind');
var rewind_percentage = document.querySelector('.js_rewind_percentage');
Expand All @@ -732,7 +769,33 @@ <h2>Events</h2>
enableMouseEvents: true
});

var dot_navigation_slider = lory(dot_navigation, {
function handleDotEvent(e) {
if (e.type === 'before.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
var clone = dot_list_item.cloneNode();
dot_container.appendChild(clone);
}
dot_container.childNodes[0].classList.add('active');
}
if (e.type === 'after.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
dot_container.childNodes[i].addEventListener('click', function(e) {
dot_navigation_slider.slideTo(Array.prototype.indexOf.call(dot_container.childNodes, e.target));
});
}
}
if (e.type === 'after.lory.slide') {
for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
dot_container.childNodes[i].classList.remove('active');
}
dot_container.childNodes[e.detail.currentSlide - 1].classList.add('active');
}
}
simple_dots.addEventListener('before.lory.init', handleDotEvent);
simple_dots.addEventListener('after.lory.init', handleDotEvent);
simple_dots.addEventListener('after.lory.slide', handleDotEvent);

var dot_navigation_slider = lory(simple_dots, {
infinite: 1,
enableMouseEvents: true
});
Expand Down

0 comments on commit fb8593f

Please sign in to comment.