Today’s creative solution is a Peekaboo – a simple responsive slideshow slider with touch and swipe interactions. The previous and next slides are visible at the sides of the main image that is currently viewed.
Peekaboo is a very lightweight plugin that can be included in every modern website design. It also can be added to a websites that built with a grid-based frameworks such as Foundation or Bootstrap.
If you are wondering if Peekaboo is going to perform well on mobile devices, you should not worry at all as it has a touch and swipe interactions. Users will be able to browse through images on their mobile phones and tablets without any issues and slides resize perfectly on any smaller device.
Have a look at code and make sure that you see the demo below.
HTML
The following HTML structure should be presented as you see it on the page you want the slider to be. The first three divs, their classes and the data attribute to the first one are crucially important for a working slider. You should have the same markup so you have a full working solution.
<div class="peekaboo-parent" data-peekaboo-parent> <div class="js-peekaboo-container peekaboo-container container"> <div class="peekaboo-window js-peekaboo-window">
The faded images on both sides the included by the following two divs.
<!-- clickable faded prev/next regions --> <div class="js-peekaboo-pager-prev peekaboo-pager-prev peekaboo-pager active"></div> <div class="js-peekaboo-pager-next peekaboo-pager-next peekaboo-pager active"></div>
This is the actual slider with the image you would like to include and present.
<!-- this is the actual image slider. construct your images here. --> <div class="js-peekaboo-slide-body peekaboo-slide-body"> <span class="js-peekaboo-slide peekaboo-slide" data-slide-to="0"><img src="images/FPO-slide1.jpg"/></span> <span class="js-peekaboo-slide peekaboo-slide" data-slide-to="1"><img src="images/FPO-slide2.jpg"/></span> <span class="js-peekaboo-slide peekaboo-slide" data-slide-to="2"><img src="images/FPO-slide3.jpg"/></span> <span class="js-peekaboo-slide peekaboo-slide" data-slide-to="3"><img src="images/FPO-slide2.jpg"/></span> </div>
If you feel like you want to add some paging dots under the slider, you should include the following un-ordered list after the ending slider div. Bear in mind that you have to adjust the data attributes of the dots to match the number of the sliders.
The last three closing divs finish of the HTML markup.
<!-- optional paging dots --> <ul class="js-peekaboo-paging-dots peekaboo-paging-dots"> <li class="js-peekaboo-paging-dot peekaboo-paging-dot active" data-slide-to="0">°</li> <li class="js-peekaboo-paging-dot peekaboo-paging-dot" data-slide-to="1">°</li> <li class="js-peekaboo-paging-dot peekaboo-paging-dot" data-slide-to="2">°</li> <li class="js-peekaboo-paging-dot peekaboo-paging-dot" data-slide-to="3">°</li> </ul> </div> </div> </div>
CSS
The CSS for Peekaboo slider can be easily adjusted to match your needs.
.peekaboo-parent { overflow: hidden; height: 100%;}
.peekaboo-window { width: 740px; margin-left: auto; margin-right: auto;}
@media only screen and (max-width: 767px) {
.peekaboo-window { width: 100%; }}
.peekaboo-container { min-height: 280px; background-repeat: no-repeat; background-position: 50% 50%; }
.peekaboo-window { white-space: nowrap; font-size: 0; text-align: left; position: relative; padding: 0 !important; margin-bottom: 40px; margin-top: 20px;}
@media only screen and (max-width: 767px) {
.peekaboo-window { margin-bottom: 10px; }}
.peekaboo-slide-body{ -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0); }
@media only screen and (max-width: 768px) {
.peekaboo-slide-body { padding: 0; }}
.peekaboo-pager { position: absolute; top: 0; right: 100%; left: auto; width: 100%; height: 100%; z-index: 800;}
.peekaboo-pager.active { cursor: pointer; display: block;}
.peekaboo-pager-next { left: 100%; right: auto;}
.peekaboo-slide { opacity: 0.1; filter: alpha(opacity=10); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; display: inline-block; width: 100% !important; }
.peekaboo-slide.active { opacity: 1; filter: alpha(opacity=100);}
.peekaboo-container img { max-width: 100%; max-height: 100%; width: 100%;}
.peekaboo-paging-dots { font-size: 36px; text-align: center; }
.peekaboo-paging-dot { display: inline; }
.peekaboo-paging-dot:hover{ cursor: pointer; cursor: hand;}
.peekaboo-paging-dot.active{ color: orange; }
.peekaboo-parent-2 .peekaboo-slide{ opacity: 1.0; filter: none; -webkit-transition: none; transition: none;}
.peekaboo-parent-2 .peekaboo-pager{ opacity: .7; background-color: white; }
.peekaboo-notransition{ -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important;
-ms-transition: none !important; transition: none !important;}
JS
You need to include the latest jQuery library and the script.js to be sure that everything will work smoothly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="peekaboo/js/script.js"></script>
To finish off and have a full working slider, you need to add some JS code to trigger the Peekaboo slider. In the script below you also have some option to help you adjust the slider; you can define that slider interval, whether you want to start automatically, the animation duration etc…
<script type="text/javascript">
$(document).ready(function(){
$('[data-peekaboo-parent]').peekABoo({
circularSlider : true,
autostartSlider : true,
sliderInterval : 4000,
sliderDirection : "next",
stopOnInteraction : true,
stopAfterDuration : 30000,
animationDuration : 300<
});
});
</script>
As you can see Peekaboo is a great slideshow solution that can be used in beautiful web pages. If you have any issues with implementation of it, feel free to leave me a comment below with your question.