简体   繁体   中英

Styling bootstrap carousel navigation

Ok so I am trying to do something a little out of my league and im pretty close!

I want the prev/next buttons to be like this when you get to the page:

在此处输入图片说明

And like this when you hover (spread out and be ready to use)

在此处输入图片说明

I am at the first stage I am just having some issues with positioning if anyone can take a look.

Here is the live site (just scroll to right below the portfolio)

You can try something like

.left.carousel-control:hover{
    margin-left:-50px;
}
.right.carousel-control:hover{
    margin-left:50px;
}

Update :

.left.carousel-control, .right.carousel-control{
   width: 100%;
   left: 0;
}
.carousel-control{top: 75%;}
.carousel-control.right{
right: 43%;
}
.carousel-control.left{
left: 42%;
}
.carousel:hover .carousel-control.right{right: 0;}
.carousel:hover .carousel-control.left{left: 0;}

This might help.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM