"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) - 4 years ago - Reply 1


Now you can use it in phone or tablet.

koshikojha (-3) - 4 years ago - Reply 0


Not responsive

Bmuzammil (-4) - 4 years ago - Reply -2


Now it's Responsive.

koshikojha (-3) - 4 years ago - Reply -3


I can't seem to get this one to function? I have everything copied as posted... not sure why it's not turning? Javascript is on there too!

colourinfusion () - 1 year ago - Reply 0


this is very cool but not mobile responsive..is there one responsive for mobile?

jonsnow () - 2 years ago - Reply 0


this is very cool but not mobile responsive..is there one responsive for mobile?

jonsnow () - 2 years ago - Reply 0


this is very cool but not mobile responsive..is there one responsive for mobile?

jonsnow () - 2 years ago - Reply 0


icons are not responsive in mobile devices. please send me responsive code if u have, it would be very grateful if u share to my mail id shivanagaraju940@gmail.com

shivav007 () - 3 years ago - Reply 0


icons are not responsive in mobile devices. please send me responsive code if u have, it would be very grateful if u share to my mail id shivanagaraju940@gmail.com

shivav007 () - 3 years ago - Reply 0


its not responsive in mobile devices. please send me responsive code if u have, it would be very grateful if u share to my mail id shivanagaraju940@gmail.com

shivav007 () - 3 years ago - Reply 0


How to change its design from Circle to eclipse?

Ringweb (-1) - 3 years 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 () - 3 years ago - Reply 0