Artem_A,
что в css пропишите то и получите
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.detailsIcon{
color: #FFFFFF;
padding: 6px;
text-decoration: none;
margin: 5px;
width: 15px;
height: 15px;
border-radius: 50%;
display: block;
}
.detailsIcon:nth-child(1){
background-color: #FF00FF;
}
.detailsIcon:nth-child(2){
background-color: #00BFFF;
}
.detailsIcon:nth-child(3){
background-color: #FFD700;
}
.activeSlide{
border: 2px solid #FF0000;
margin: 3px;
}
section {
border: 2px solid #FF0000;
color: #7CFC00;
width: 400px;
height: 150px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>
<script>
$(function(){
$('#pager').cycle({
fx: 'scrollLeft',
timeout: 0,
pager: '#nav_details'
});
$('#nav_details a').addClass('detailsIcon').text('')
});
</script>
</head>
<body> <div id="slider_detail">
<div id="nav_details">
</div>
<div id="pager">
<section class="page1">
<h2>Creative Ideas</h2>
<p></p>
<p></p>
</section>
<section class="page2">
<h2>Creative Ideas2</h2>
<p></p>
<p></p>
</section>
<section class="page3">
<h2>Creative Ideas3</h2>
<p></p>
<p></p>
</section>
</div>
</div>
</body>
</html>