"Services in circle slider"
Bootstrap 4.1.1 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="iq-features"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-3 col-md-12"></div> <div class="col-lg-6 col-md-12"> <div class="holderCircle"> <div class="round"></div> <div class="dotCircle"> <span class="itemDot active itemDot1" data-tab="1"> <i class="fa fa-clock-o"></i> <span class="forActive"></span> </span> <span class="itemDot itemDot2" data-tab="2"> <i class="fa fa-comments"></i> <span class="forActive"></span> </span> <span class="itemDot itemDot3" data-tab="3"> <i class="fa fa-user"></i> <span class="forActive"></span> </span> <span class="itemDot itemDot4" data-tab="4"> <i class="fa fa-tags"></i> <span class="forActive"></span> </span> <span class="itemDot itemDot5" data-tab="5"> <i class="fa fa-upload"></i> <span class="forActive"></span> </span> <span class="itemDot itemDot6" data-tab="6"> <i class="fa fa-briefcase"></i> <span class="forActive"></span> </span> </div> <div class="contentCircle"> <div class="CirItem title-box active CirItem1"> <h2 class="title"><span>Automate</span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-clock-o"></i> </div> <div class="CirItem title-box CirItem2"> <h2 class="title"><span>Chat </span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-comments"></i> </div> <div class="CirItem title-box CirItem3"> <h2 class="title"><span>Responses</span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-user"></i> </div> <div class="CirItem title-box CirItem4"> <h2 class="title"><span>Tags</span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-tags"></i> </div> <div class="CirItem title-box CirItem5"> <h2 class="title"><span>Sharing</span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-upload"></i> </div> <div class="CirItem title-box CirItem6"> <h2 class="title"><span>Support</span></h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <i class="fa fa-briefcase"></i> </div> </div> </div> </div> <div class="col-lg-3 col-md-12"></div> </div> </div> </section>
.holderCircle { width: 500px; height: 500px; border-radius: 100%; margin: 60px auto; position: relative; } .dotCircle { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 20; } .dotCircle .itemDot { display: block; width: 80px; height: 80px; position: absolute; background: #ffffff; color: #7d4ac7; border-radius: 20px; text-align: center; line-height: 80px; font-size: 30px; z-index: 3; cursor: pointer; border: 2px solid #e6e6e6; } .dotCircle .itemDot .forActive { width: 56px; height: 56px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; } .dotCircle .itemDot .forActive::after { content: ''; width: 5px; height: 5px; border: 3px solid #7d4ac7; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100%; } .dotCircle .itemDot .forActive::before { content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #a733bb; right: -39px; } .dotCircle .itemDot.active .forActive { display: block; } .round { position: absolute; left: 40px; top: 45px; width: 410px; height: 410px; border: 2px dotted #a733bb; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; } .dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #ffffff; transition: 0.5s; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d4ac7+0,a733bb+100 */ background: #7d4ac7; /* Old browsers */ background: -moz-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #7d4ac7 0%, #a733bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7', endColorstr='#a733bb', GradientType=1); /* IE6-9 */ border: 2px solid #ffffff; -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); } .dotCircle .itemDot { font-size: 40px; } .contentCircle { width: 250px; border-radius: 100%; color: #222222; position: relative; top: 150px; left: 50%; transform: translate(-50%, -50%); } .contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; line-height: 250px; } .CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; } .contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 50%; margin-left: -90px; color: #000000; opacity: 0.1; } @media only screen and (min-width:300px) and (max-width:599px) { .holderCircle {/* width: 300px; height: 300px;*/ margin: 110px auto; } .holderCircle::after { width: 100%; height: 100%; } .dotCircle { width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } } @media only screen and (min-width:600px) and (max-width:767px) { } @media only screen and (min-width:768px) and (max-width:991px) { } @media only screen and (min-width:992px) and (max-width:1199px) { } @media only screen and (min-width:1200px) and (max-width:1499px) { } .title-box .title { font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; } .title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 800; color: #640178; } .title-box p {font-size: 17px; line-height: 2em; }
let i=2; $(document).ready(function(){ var radius = 200; var fields = $('.itemDot'); var container = $('.dotCircle'); var width = container.width(); radius = width/2.5; var height = container.height(); var angle = 0, step = (2*Math.PI) / fields.length; fields.each(function() { var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2); var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2); if(window.console) { console.log($(this).text(), x, y); } $(this).css({ left: x + 'px', top: y + 'px' }); angle += step; }); $('.itemDot').click(function(){ var dataTab= $(this).data("tab"); $('.itemDot').removeClass('active'); $(this).addClass('active'); $('.CirItem').removeClass('active'); $( '.CirItem'+ dataTab).addClass('active'); i=dataTab; $('.dotCircle').css({ "transform":"rotate("+(360-(i-1)*36)+"deg)", "transition":"2s" }); $('.itemDot').css({ "transform":"rotate("+((i-1)*36)+"deg)", "transition":"1s" }); }); setInterval(function(){ var dataTab= $('.itemDot.active').data("tab"); if(dataTab>6||i>6){ dataTab=1; i=1; } $('.itemDot').removeClass('active'); $('[data-tab="'+i+'"]').addClass('active'); $('.CirItem').removeClass('active'); $( '.CirItem'+i).addClass('active'); i++; $('.dotCircle').css({ "transform":"rotate("+(360-(i-2)*36)+"deg)", "transition":"2s" }); $('.itemDot').css({ "transform":"rotate("+((i-2)*36)+"deg)", "transition":"1s" }); }, 5000); });

Related: See More


Questions / Comments:

i want to use it for phone too, how i can do this?

torbrand (1) - 11 months ago - Reply 1


Now you can use it in phone or tablet.

koshikojha (-2) - 9 months ago - Reply 0


Not responsive

Bmuzammil (-4) - 1 year ago - Reply -2


Now it's Responsive.

koshikojha (-2) - 9 months ago - Reply -2


How to change its design from Circle to eclipse?

Ringweb (-1) - 2 months ago - Reply 0


How do you get the Icons to center? I've copied the snippet (HTML,css, JS) but the icons are positioned at the top of the small rounded square. Everything else is aligning perfectly and working perfectly just the alignment needs adjustment. I've tried adding Padding and a margin but nothing seems to move it down.

jre08 () - 5 months ago - Reply 0