I have made this layout for my page.
with this css
.carousel-indicators {
position: absolute;
top: 30%;
left: 68%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 40px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 2px solid #527BBD;
border-radius: 50px;
}
.carousel-indicators .active {
width: 42px;
height: 42px;
margin-right: 40px;
background-color: #D91C23;
}
However, I need to create a slider coin with connecting lines like this:
can anyone help? thanks in advance!
Since SVG was mentioned, here just an example:
<svg> <rect x=20 y=20 width=210 height=1 style=stroke:grey /> <circle cx=20 cy=20 r=10 stroke=black stroke-width=1 fill=white /> <circle cx=90 cy=20 r=10 stroke=black stroke-width=1 fill=red /> <circle cx=160 cy=20 r=10 stroke=black stroke-width=1 fill=white /> <circle cx=230 cy=20 r=10 stroke=black stroke-width=1 fill=white /> </svg>
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
and in your html file
<div>foo</div>
<hr/>
<div>bar</div>
You could just do it in SVG. It's reactive to DOM events just like HTML.You can even use SVG in jQuery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.