Leave centered bullets and right and left navigation arrows on slider

Question

Leave centered bullets and right and left navigation arrows on slider

Navigation

#1 by (1 votes)

0

I'm trying unsuccessfully to leave the navigation bullets centralized and the navigation arrows to the left and right side of the slider, however it changes the settings of the css I do not succeed.

The site is this: Developing site

For the arrows, I have this:


.flex-direction-nav a {
    display: block;
    width: 27px;
    height: 27px;
    background-image: url(../images/slider/arrows.png);
    background-repeat: no-repeat;
    cursor: pointer;
    text-indent: -999em;
}

.flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-prev.flex-disabled {
    background-position: 10px 7px;
}
.flex-direction-nav a.flex-next, .flex-direction-nav a.flex-next.flex-disabled {
    background-position: -17px 7px;
}

And for bullets this:

.flex-control-nav {
    position: absolute;
    left: 0;
    bottom: 15px;
    background-color: rgba(0,0,0,0.8);
    padding: 10px 20px;
    overflow: hidden;
    z-index: 50;
}
.flex-control-nav li {
    margin-left: 8px;
    float: left;
}
.flex-control-nav li:first-child {
    margin: 0;
}
.flex-control-paging a {
    width: 7px;
    height: 7px;
    display: block;
    background-color: #e5e5e5;
    cursor: pointer;
    text-indent: -999em;
}
.flex-control-paging a:hover {
    background-color: #999;
}
.flex-control-paging a.flex-active {
    cursor: default;
}

In the case of bullets I tried to change this:

flex-control-nav {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 35px;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 20px;
    position: relative;
    width: 6%;
    z-index: 50;
}

But as I said, to no avail.

jquery css

asked by anonymous 26.01.2015 / 13:58

1 answer

Using Ruby on Rails is it possible to execute external functions on the client side? How to execute a jquery / javascript function only on page load and avoid postback?

score 1 · Accepted Answer

You can use the following:

Here bullets are centralized by setting the left and right properties to 0 and margin to 0 auto . Using this method the width must be fixed.

.flex-control-nav {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 70px;
    bottom: 15px;
    background-color: rgba(0,0,0,0.8);
    padding: 10px 20px;
    overflow: hidden;
    z-index: 50;
}

In this part the ideal would be to separate the arrows in HTML and adjust the css accordingly. The code below will work with the current version setting ul to 100% width and li with position: absolute one on each side.

ul.flex-direction-nav {
    width: 100%;
}

ul.flex-direction-nav li:first-of-type {
    position: absolute;
    left: 0;
}

ul.flex-direction-nav li:last-of-type {
    position: absolute;
    right: 0;
}