web20opensource/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */


.miniSliderContainer{
    padding-bottom: 9em;
    width: 100%;
    background: #f06;
    background: linear-gradient(45deg, #f06, yellow);
    min-height: 100%;
}

.miniSlider{
    height: 0;
}

.miniSlider__item{
	display: none;
	padding: 1em;
    position: absolute;
    width: 80%;
}

.miniSlider__item.visible{
	display: block;
}

.miniSlider__button__trigger.selected img{
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 hack */
	filter: alpha(opacity = 50); /* IE 5-7 hack */
}

.ie7 .miniSlider__button__trigger.selected {
}

.miniSlider__button__trigger.unselected img{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.ie7 .miniSlider__button__trigger.unselected{
}

.miniSlider__buttons{
	left: 1.8em;
    position: absolute;
    top: 8.5em;
    text-align: center;
}

.miniSlider__button{
	float: left;
	display: inline-block;
	width: 2em;
	cursor: pointer;
}

.miniSlider__button img{
	width: 80%;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
https://jsfiddle.net/dahu5j2g/
<div class="miniSliderContainer">
	<div class="miniSlider">
		<ul class="miniSlider__items">
			<li class="miniSlider__item visible">
				First item
			</li>
			<li  class="miniSlider__item">
				Second item
			</li>
			<li class="miniSlider__item">
				Third item
			</li>
		</ul>
		<ul class="miniSlider__buttons">
			<li class="miniSlider__button"><a class="miniSlider__button__trigger selected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers1.png" /></a></li>
			<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers2.png" /></a></li>
			<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers3.png" /></a></li>
		</ul>
	</div>
</div>

## dabblet.js
// alert('Hello world!');
$(document).ready(function(){
	if ( $('.miniSlider').length ){
			var showThisSlider = function(){
			   showThisSlideIndex = $(this).parent().index();
			   $('li.miniSlider__item').not(':eq'+'('+showThisSlideIndex+')').fadeOut(function(){
			     $('li.miniSlider__item').filter(':eq'+'('+showThisSlideIndex+')').fadeIn('slow');
			   });

				// add and remove select and unselect class to the button 1,2 and 3 from the slider
				$('.miniSlider__button').not(':eq'+'('+showThisSlideIndex+')').find("a").addClass('unselected').removeClass('selected');

				$('.miniSlider__button').filter(':eq'+'('+showThisSlideIndex+')').find("a").addClass('selected').removeClass('unselected');
			}

			// attach the handler to the <a> elements
			$('.miniSlider__button__trigger').click(showThisSlider);
		}
});

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	/**
	* The first commented line is your dabblet’s title
	*/


	.miniSliderContainer{
	padding-bottom: 9em;
	width: 100%;
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}

	.miniSlider{
	height: 0;
	}

	.miniSlider__item{
	display: none;
	padding: 1em;
	position: absolute;
	width: 80%;
	}

	.miniSlider__item.visible{
	display: block;
	}

	.miniSlider__button__trigger.selected img{
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 hack */
	filter: alpha(opacity = 50); /* IE 5-7 hack */
	}

	.ie7 .miniSlider__button__trigger.selected {
	}

	.miniSlider__button__trigger.unselected img{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	}

	.ie7 .miniSlider__button__trigger.unselected{
	}

	.miniSlider__buttons{
	left: 1.8em;
	position: absolute;
	top: 8.5em;
	text-align: center;
	}

	.miniSlider__button{
	float: left;
	display: inline-block;
	width: 2em;
	cursor: pointer;
	}

	.miniSlider__button img{
	width: 80%;
	}
	<!-- content to be placed inside <body>…</body> -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	https://jsfiddle.net/dahu5j2g/
	<div class="miniSliderContainer">
	<div class="miniSlider">
	<ul class="miniSlider__items">
	<li class="miniSlider__item visible">
	First item
	</li>
	<li class="miniSlider__item">
	Second item
	</li>
	<li class="miniSlider__item">
	Third item
	</li>
	</ul>
	<ul class="miniSlider__buttons">
	<li class="miniSlider__button"><a class="miniSlider__button__trigger selected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers1.png" /></a></li>
	<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers2.png" /></a></li>
	<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers3.png" /></a></li>
	</ul>
	</div>
	</div>
	// alert('Hello world!');
	$(document).ready(function(){
	if ( $('.miniSlider').length ){
	var showThisSlider = function(){
	showThisSlideIndex = $(this).parent().index();
	$('li.miniSlider__item').not(':eq'+'('+showThisSlideIndex+')').fadeOut(function(){
	$('li.miniSlider__item').filter(':eq'+'('+showThisSlideIndex+')').fadeIn('slow');
	});

	// add and remove select and unselect class to the button 1,2 and 3 from the slider
	$('.miniSlider__button').not(':eq'+'('+showThisSlideIndex+')').find("a").addClass('unselected').removeClass('selected');

	$('.miniSlider__button').filter(':eq'+'('+showThisSlideIndex+')').find("a").addClass('selected').removeClass('unselected');
	}

	// attach the handler to the <a> elements
	$('.miniSlider__button__trigger').click(showThisSlider);
	}
	});